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

資訊專欄INFORMATION COLUMN

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

Gilbertat / 2166人閱讀

摘要：但是給傳遞的評論數據并沒有傳遞給，所以現在發表評論時沒有反應的。包括實現功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經結束，你可以利用這些知識點來構建簡單的功能模塊了。

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

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

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

接下來的代碼比較順理成章了。修改 CommentList 可以讓它可以顯示評論列表：

// CommentList.js
import React, { Component } from "react"

class CommentList extends Component {
  render() {
    const comments = [
      {username: "Jerry", content: "Hello"},
      {username: "Tomy", content: "World"},
      {username: "Lucy", content: "Good"}
    ]

    return (
      
{comments.map((comment, i) => {
        return (
          

            {comment.username}：{comment.content}
          

        )
      })}

    )
  }
}

export default CommentList

這里的代碼沒有什么新鮮的內容，只不過是建立了一個 comments 的數組來存放一些測試數據的內容，方便我們后續測試。然后把 comments 的數據渲染到頁面上，這跟我們之前講解的章節的內容一樣——使用 map 構建一個存放 JSX 的數組。就可以在瀏覽器看到效果：

修改 Comment.js 讓它來負責具體每條評論內容的渲染：

import React, { Component } from "react"

class Comment extends Component {
  render () {
    return (
      

        

          {this.props.comment.username} ：
        

        
{this.props.comment.content}

      

    )
  }
}

export default Comment

這個組件可能是我們案例里面最簡單的組件了，它只負責每條評論的具體顯示。你只需要給它的 props 中傳入一個 comment 對象，它就會把該對象中的 username 和 content 渲染到頁面上。

馬上把 Comment 應用到 CommentList 當中，修改 CommentList.js 代碼：

import React, { Component } from "react"
import Comment from "./Comment"

class CommentList extends Component {
  render() {
    const comments = [
      {username: "Jerry", content: "Hello"},
      {username: "Tomy", content: "World"},
      {username: "Lucy", content: "Good"}
    ]

    return (
      

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

    )
  }
}

export default CommentList

可以看到測試數據顯示到了頁面上：

之前我們說過 CommentList 的數據應該是由父組件 CommentApp 傳進來的，現在我們刪除測試數據，改成從 props 獲取評論數據：

import React, { Component } from "react"
import Comment from "./Comment"

class CommentList extends Component {
  render() {
    return (
      

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

    )
  }
}

export default CommentList

這時候可以看到瀏覽器報錯了：

這是因為CommentApp 使用 CommentList 的時候并沒有傳入 comments。我們給 CommentList 加上 defaultProps 防止 comments 不傳入的情況：

class CommentList extends Component {
  static defaultProps = {
    comments: []
  }
...

這時候代碼就不報錯了。但是 CommentInput 給 CommentApp 傳遞的評論數據并沒有傳遞給 CommentList，所以現在發表評論時沒有反應的。

我們在 CommentApp 的 state 中初始化一個數組，來保存所有的評論數據，并且通過 props 把它傳遞給 CommentList。修改 CommentApp.js：

import React, { Component } from "react"
import CommentInput from "./CommentInput"
import CommentList from "./CommentList"

class CommentApp extends Component {
  constructor () {
    super()
    this.state = {
      comments: []
    }
  }

  handleSubmitComment (comment) {
    console.log(comment)
  }

  render() {
    return (
      

        
        
      

    )
  }
}

export default CommentApp

接下來，修改 handleSubmitComment ：每當用戶發布評論的時候，就把評論數據插入 this.state.comments 中，然后通過 setState 把數據更新到頁面上：

...
  handleSubmitComment (comment) {
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }
...

現在代碼應該是可以按照需求正常運作了，輸入用戶名和評論內容，然后點擊發布：

為了讓代碼的健壯性更強，給 handleSubmitComment 加入簡單的數據檢查：

...
  handleSubmitComment (comment) {
    if (!comment) return
    if (!comment.username) return alert("請輸入用戶名")
    if (!comment.content) return alert("請輸入評論內容")
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }
...

到這里，我們的第一個實戰案例——評論功能已經完成了！完整的案例代碼可以在這里 comment-app 找到， 在線演示 體驗。

總結

在這個案例里面，我們除了復習了之前所學過的內容以外還學習了新的知識點。包括：

實現功能之前先理解、分析需求，劃分組件。并且掌握劃分組件的基本原則——可復用性、可維護性。

受控組件的概念，React.js 中的 、