React.js 小書 Lesson27 - 實戰分析:評論功能(六)


React.js 小書 Lesson27 - 實戰分析:評論功能(六)

本文作者:胡子大哈
本文原文:http://huziketang.com/books/react/lesson27

轉載請注明出處,保留原文鏈接以及作者信息

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


{%raw%}

刪除評論

現在發布評論,評論不會消失,評論越來越多并不是什么好事。所以我們給評論組件加上刪除評論的功能,這樣就可以刪除不想要的評論了。修改 src/Comment.jsrender 方法,新增一個刪除按鈕:

...
  render () {
    const { comment } = this.props
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span className='comment-username'>
            {comment.username}
          </span>:
        </div>
        <p>{comment.content}</p>
        <span className='comment-createdtime'>
          {this.state.timeString}
        </span>
        <span className='comment-delete'>
          刪除
        </span>
      </div>
    )
  }
... 

我們在后面加了一個刪除按鈕,因為 index.css 定義了樣式,所以鼠標放到特定的評論上才會顯示刪除按鈕,讓用戶體驗好一些。

我們知道評論列表數據是放在 CommentApp 當中的,而這個刪除按鈕是在 Comment 當中的,現在我們要做的事情是用戶點擊某條評論的刪除按鈕,然后在 CommentApp 中把相應的數據刪除。但是 CommentAppComment 的關系是這樣的:

示例圖片
示例圖片

CommentCommentApp 之間隔了一個 CommentListComment 無法直接跟 CommentApp 打交道,只能通過 CommentList 來轉發這種刪除評論的消息。修改 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 () {
    ...
        <span
          onClick={this.handleDeleteComment.bind(this)}
          className='comment-delete'>
          刪除
        </span>
      </div>
    )
  }

現在在使用 Comment 的時候,可以傳入 onDeleteCommentindex 兩個參數。index 用來標志這個評論在列表的下標,這樣點擊刪除按鈕的時候我們才能知道你點擊的是哪個評論,才能知道怎么從列表數據中刪除。用戶點擊刪除會調用 handleDeleteComment ,它會調用從上層傳入的 props. onDeleteComment 函數告知上一層組件刪除的消息,并且把評論下標傳出去。現在修改 src/CommentList.js 讓它把這兩個參數傳進來:

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 (
      <div>
        {this.props.comments.map((comment, i) =>
          <Comment
            comment={comment}
            key={i}
            index={i}
            onDeleteComment={this.handleDeleteComment.bind(this)} />
        )}
      </div>
    )
  }
}

當用戶點擊按鈕的時候,Comment 組件會調用 props.onDeleteComment,也就是 CommentListhandleDeleteComment 方法。而 handleDeleteComment 會調用 CommentList 所接受的配置參數中的 props.onDeleteComment,并且把下標傳出去。

也就是說,我們可以在 CommentAppCommentList 傳入一個 onDeleteComment 的配置參數來接受這個刪除評論的消息,修改 CommentApp.js

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

  render() {
    return (
      <div className='wrapper'>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList
          comments={this.state.comments}
          onDeleteComment={this.handleDeleteComment.bind(this)} />
      </div>
    )
  }
}
...

現在點擊刪除按鈕,可以在控制臺看到評論對應的下標打印了出來。其實這就是這么一個過程:CommentList 把下標 index 傳給 Comment。點擊刪除按鈕的時候,Commentindex 傳給了 CommentListCommentList 再把它傳給 CommentApp。現在可以在 CommentApp 中刪除評論了:

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

我們通過 comments.splice 刪除特定下標的評論,并且通過 setState 重新渲染整個評論列表;當然了,還需要把最新的評論列表數據更新到 LocalStorage 中,所以我們在刪除、更新以后調用了 _saveComments 方法把數據同步到 LocalStorage 中。

現在就可以愉快地刪除評論了。但是,你刪除評論以后 5 秒鐘后就會在控制臺中看到報錯了:

示例圖片
示例圖片

這是因為我們忘了清除評論的定時器,修改 src/Comment.js,新增生命周期 commentWillUnmount 在評論組件銷毀的時候清除定時器:

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

這才算完成了第 5 個需求。

顯示代碼塊

用戶在的輸入內容中任何以 `` 包含的內容都會用 <code> 包含起來顯示到頁面上。<code> 這是一個 HTML 結構,需要往頁面動態插入 HTML 結構我們只能用 dangerouslySetInnerHTML 了,修改 src/Comment.js,把原來 render() 函數中的:

<p>{comment.content}</p>

修改成:

<p dangerouslySetInnerHTML={{
  __html: this._getProcessedContent(comment.content)
}} />

我們把經過 this._getProcessedContent 處理的評論內容以 HTML 的方式插入到 <p> 元素中,this._getProcessedContent 是這樣實現的:

...
  _getProcessedContent (content) {
    return content
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;")
      .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
  }
...

看起來很復雜,其實前 5 行是用來處理 HTML 內容轉義的,最后一行是用來插入 <code> 標簽的。如果我們把用戶輸入的內容全部以 HTML 顯示到頁面上,那么就會造成跨站腳本攻擊。所以前 5 個 replace 實際上是把類似于 <> 這種內容替換轉義一下。而最后一行才是真正實現需求的代碼,把 `` 包含的內容用 <code> 包裹起來。

輸入:

這是代碼塊 `console.log`,這是 <h1>正常內容</h1>。

看看效果:

示例圖片
示例圖片

我們安全地完成了第 6 個需求。到目前為止,第二階段的實戰已經全部完成,你可以在這里找到完整的代碼。

總結

到這里第二階段已經全部結束,我們已經掌握了全部 React.js 實戰需要的入門知識。接下來我們會學習兩個相對比較高級的 React.js 的概念,然后進入 React-router 和 Redux 的世界,讓它們配合 React.js 來構建更成熟的前端頁面。
{%endraw%}

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容