成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson27 - 實(shí)戰(zhàn)分析：評(píng)論功能（六）

Freeman / 680人閱讀

摘要：所以我們給評(píng)論組件加上刪除評(píng)論的功能，這樣就可以刪除不想要的評(píng)論了。輸入這是代碼塊，這是正常內(nèi)容。到目前為止，第二階段的實(shí)戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。下一節(jié)中我們將介紹小書高階組件。

React.js 小書 Lesson27 - 實(shí)戰(zhàn)分析：評(píng)論功能（六） 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson27

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

{%raw%}

刪除評(píng)論

現(xiàn)在發(fā)布評(píng)論，評(píng)論不會(huì)消失，評(píng)論越來越多并不是什么好事。所以我們給評(píng)論組件加上刪除評(píng)論的功能，這樣就可以刪除不想要的評(píng)論了。修改 src/Comment.js 的 render 方法，新增一個(gè)刪除按鈕：

...
  render () {
    const { comment } = this.props
    return (
      

        

          
            {comment.username}
          ：
        

        
{comment.content}

        
          {this.state.timeString}
        
        
          刪除
        
      

    )
  }
...

我們?cè)诤竺婕恿艘粋€(gè)刪除按鈕，因?yàn)?index.css 定義了樣式，所以鼠標(biāo)放到特定的評(píng)論上才會(huì)顯示刪除按鈕，讓用戶體驗(yàn)好一些。

我們知道評(píng)論列表數(shù)據(jù)是放在 CommentApp 當(dāng)中的，而這個(gè)刪除按鈕是在 Comment 當(dāng)中的，現(xiàn)在我們要做的事情是用戶點(diǎn)擊某條評(píng)論的刪除按鈕，然后在 CommentApp 中把相應(yīng)的數(shù)據(jù)刪除。但是 CommentApp 和 Comment 的關(guān)系是這樣的：

Comment 和 CommentApp 之間隔了一個(gè) CommentList，Comment 無法直接跟 CommentApp 打交道，只能通過 CommentList 來轉(zhuǎn)發(fā)這種刪除評(píng)論的消息。修改 Comment 組件，讓它可以把刪除的消息傳遞到上一層：

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    onDeleteComment: PropTypes.func,
    index: PropTypes.number
  }
...
  handleDeleteComment () {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(this.props.index)
    }
  }

  render () {
    ...
        
          刪除
) }

現(xiàn)在在使用 Comment 的時(shí)候，可以傳入 onDeleteComment 和 index 兩個(gè)參數(shù)。index 用來標(biāo)志這個(gè)評(píng)論在列表的下標(biāo)，這樣點(diǎn)擊刪除按鈕的時(shí)候我們才能知道你點(diǎn)擊的是哪個(gè)評(píng)論，才能知道怎么從列表數(shù)據(jù)中刪除。用戶點(diǎn)擊刪除會(huì)調(diào)用 handleDeleteComment ，它會(huì)調(diào)用從上層傳入的 props. onDeleteComment 函數(shù)告知上一層組件刪除的消息，并且把評(píng)論下標(biāo)傳出去?，F(xiàn)在修改 src/CommentList.js 讓它把這兩個(gè)參數(shù)傳進(jìn)來：

class CommentList extends Component {
  static propTypes = {
    comments: PropTypes.array,
    onDeleteComment: PropTypes.func
  }

  static defaultProps = {
    comments: []
  }

  handleDeleteComment (index) {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(index)
    }
  }

  render() {
    return (
      

        {this.props.comments.map((comment, i) =>
          
        )}
      

    )
  }
}

當(dāng)用戶點(diǎn)擊按鈕的時(shí)候，Comment 組件會(huì)調(diào)用 props.onDeleteComment，也就是 CommentList 的 handleDeleteComment 方法。而 handleDeleteComment 會(huì)調(diào)用 CommentList 所接受的配置參數(shù)中的 props.onDeleteComment，并且把下標(biāo)傳出去。

也就是說，我們可以在 CommentApp 給 CommentList 傳入一個(gè) onDeleteComment 的配置參數(shù)來接受這個(gè)刪除評(píng)論的消息，修改 CommentApp.js：

...
  handleDeleteComment (index) {
    console.log(index)
  }

  render() {
    return (
      

        
        
      

    )
  }
}
...

現(xiàn)在點(diǎn)擊刪除按鈕，可以在控制臺(tái)看到評(píng)論對(duì)應(yīng)的下標(biāo)打印了出來。其實(shí)這就是這么一個(gè)過程：CommentList 把下標(biāo) index 傳給 Comment。點(diǎn)擊刪除按鈕的時(shí)候，Comment 把 index 傳給了 CommentList，CommentList 再把它傳給 CommentApp?，F(xiàn)在可以在 CommentApp 中刪除評(píng)論了：

...
  handleDeleteComment (index) {
    const comments = this.state.comments
    comments.splice(index, 1)
    this.setState({ comments })
    this._saveComments(comments)
  }
...

我們通過 comments.splice 刪除特定下標(biāo)的評(píng)論，并且通過 setState 重新渲染整個(gè)評(píng)論列表；當(dāng)然了，還需要把最新的評(píng)論列表數(shù)據(jù)更新到 LocalStorage 中，所以我們?cè)趧h除、更新以后調(diào)用了 _saveComments 方法把數(shù)據(jù)同步到 LocalStorage 中。

現(xiàn)在就可以愉快地刪除評(píng)論了。但是，你刪除評(píng)論以后 5 秒鐘后就會(huì)在控制臺(tái)中看到報(bào)錯(cuò)了：

這是因?yàn)槲覀兺饲宄u(píng)論的定時(shí)器，修改 src/Comment.js，新增生命周期 commentWillUnmount 在評(píng)論組件銷毀的時(shí)候清除定時(shí)器：

...
  componentWillUnmount () {
    clearInterval(this._timer)
  }
...

這才算完成了第 5 個(gè)需求。

顯示代碼塊

用戶在的輸入內(nèi)容中任何以 `` 包含的內(nèi)容都會(huì)用 包含起來顯示到頁面上。 這是一個(gè) HTML 結(jié)構(gòu)，需要往頁面動(dòng)態(tài)插入 HTML 結(jié)構(gòu)我們只能用 dangerouslySetInnerHTML 了，修改 src/Comment.js，把原來 render() 函數(shù)中的：

{comment.content}

修改成：

我們把經(jīng)過 this._getProcessedContent 處理的評(píng)論內(nèi)容以 HTML 的方式插入到

元素中，this._getProcessedContent 是這樣實(shí)現(xiàn)的：

...
  _getProcessedContent (content) {
    return content
      .replace(/&/g, "&")
      .replace(//g, ">")
      .replace(/"/g, """)
      .replace(/"/g, "'")
      .replace(/`([Ss]+?)`/g, "$1")
  }
...

看起來很復(fù)雜，其實(shí)前 5 行是用來處理 HTML 內(nèi)容轉(zhuǎn)義的，最后一行是用來插入 標(biāo)簽的。如果我們把用戶輸入的內(nèi)容全部以 HTML 顯示到頁面上，那么就會(huì)造成跨站腳本攻擊。所以前 5 個(gè) replace 實(shí)際上是把類似于 <、> 這種內(nèi)容替換轉(zhuǎn)義一下。而最后一行才是真正實(shí)現(xiàn)需求的代碼，把 `` 包含的內(nèi)容用 包裹起來。

輸入：

這是代碼塊 `console.log`，這是 
正常內(nèi)容
。

看看效果：

我們安全地完成了第 6 個(gè)需求。到目前為止，第二階段的實(shí)戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。

總結(jié)

到這里第二階段已經(jīng)全部結(jié)束，我們已經(jīng)掌握了全部 React.js 實(shí)戰(zhàn)需要的入門知識(shí)。接下來我們會(huì)學(xué)習(xí)兩個(gè)相對(duì)比較高級(jí)的 React.js 的概念，然后進(jìn)入 React-router 和 Redux 的世界，讓它們配合 React.js 來構(gòu)建更成熟的前端頁面。
{%endraw%}

下一節(jié)中我們將介紹《React.js 小書 Lesson28 - 高階組件（Higher-Order Components）》。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89676.html

相關(guān)文章

  • 寫一本關(guān)于 React.js 的小書

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以來想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評(píng)論0 收藏0

  • React.js 小書 Lesson26 - 實(shí)戰(zhàn)分析：評(píng)論功能（五）

    摘要：修改請(qǐng)輸入用戶名請(qǐng)輸入評(píng)論內(nèi)容我們?cè)黾恿撕头謩e用于加載和保存評(píng)論列表數(shù)據(jù)。現(xiàn)在發(fā)布評(píng)論，然后刷新可以看到我們的評(píng)論并不會(huì)像以前一樣消失。非常的不錯(cuò)，持久化評(píng)論的功能也完成了。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能六。 React.js 小書 Lesson26 - 實(shí)戰(zhàn)分析：評(píng)論功能（五） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

    Nekron 評(píng)論0 收藏0

  • React.js 小書 Lesson16 - 實(shí)戰(zhàn)分析：評(píng)論功能（三）

    摘要：但是給傳遞的評(píng)論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評(píng)論時(shí)沒有反應(yīng)的。包括實(shí)現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經(jīng)結(jié)束，你可以利用這些知識(shí)點(diǎn)來構(gòu)建簡(jiǎn)單的功能模塊了。 React.js 小書 Lesson16 - 實(shí)戰(zhàn)分析：評(píng)論功能（三） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉(zhuǎn)載請(qǐng)注明出處...

    Gilbertat 評(píng)論0 收藏0

  • React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一）

    摘要：對(duì)于上面這個(gè)評(píng)論功能，可以粗略地劃分成以下幾部分評(píng)論功能的整體用一個(gè)叫的組件包含起來。每個(gè)評(píng)論列表項(xiàng)由獨(dú)立的組件負(fù)責(zé)顯示，這個(gè)組件被所使用。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能二。 React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一） 本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉(zhuǎn)載請(qǐng)注明出處，保...

    QiuyueZhong 評(píng)論0 收藏0

  • React.js 小書 Lesson15 - 實(shí)戰(zhàn)分析：評(píng)論功能（二）

    摘要：例如，上面設(shè)置了的為，在中被初始化為空字符串。如何向傳遞的數(shù)據(jù)父組件只需要通過給子組件傳入一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊發(fā)布按鈕的時(shí)候，調(diào)用中的回調(diào)函數(shù)并且將傳入該函數(shù)即可。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能三。 React.js 小書 Lesson15 - 實(shí)戰(zhàn)分析：評(píng)論功能（二） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

    siberiawolf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Freeman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<