国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson27 - 實戰分析：評論功能（六）

Freeman / 605人閱讀

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

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

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

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

{%raw%}

刪除評論

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

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

        

          
            {comment.username}
          ：
        

        
{comment.content}

        
          {this.state.timeString}
        
        
          刪除
        
      

    )
  }
...

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

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

Comment 和 CommentApp 之間隔了一個 CommentList，Comment 無法直接跟 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 () {
    ...
        
          刪除
) }

現在在使用 Comment 的時候，可以傳入 onDeleteComment 和 index 兩個參數。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 (
      

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

    )
  }
}

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

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

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

  render() {
    return (
      

        
        
      

    )
  }
}
...

現在點擊刪除按鈕，可以在控制臺看到評論對應的下標打印了出來。其實這就是這么一個過程：CommentList 把下標 index 傳給 Comment。點擊刪除按鈕的時候，Comment 把 index 傳給了 CommentList，CommentList 再把它傳給 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 個需求。

顯示代碼塊

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

{comment.content}

修改成：

我們把經過 this._getProcessedContent 處理的評論內容以 HTML 的方式插入到

元素中，this._getProcessedContent 是這樣實現的：

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

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

輸入：

這是代碼塊 `console.log`，這是 
正常內容
。

看看效果：

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

總結

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89676.html

相關文章

  • 寫一本關于 React.js 的小書

    摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評論0 收藏0

  • React.js 小書 Lesson26 - 實戰分析：評論功能（五）

    摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數據。現在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節中我們將介紹小書實戰分析評論功能六。 React.js 小書 Lesson26 - 實戰分析：評論功能（五） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

    Nekron 評論0 收藏0

  • React.js 小書 Lesson16 - 實戰分析：評論功能（三）

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

    Gilbertat 評論0 收藏0

  • React.js 小書 Lesson14 - 實戰分析：評論功能（一）

    摘要：對于上面這個評論功能，可以粗略地劃分成以下幾部分評論功能的整體用一個叫的組件包含起來。每個評論列表項由獨立的組件負責顯示，這個組件被所使用。下一節中我們將介紹小書實戰分析評論功能二。 React.js 小書 Lesson14 - 實戰分析：評論功能（一） 本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉載請注明出處，保...

    QiuyueZhong 評論0 收藏0

  • React.js 小書 Lesson15 - 實戰分析：評論功能（二）

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

    siberiawolf 評論0 收藏0

發表評論

0條評論

Freeman

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<