成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Gilbertat / 2181人閱讀

摘要：但是給傳遞的評(píng)論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評(píng)論時(shí)沒有反應(yīng)的。包括實(shí)現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經(jīng)結(jié)束，你可以利用這些知識(shí)點(diǎn)來構(gòu)建簡單的功能模塊了。

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

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

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

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

// 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

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

修改 Comment.js 讓它來負(fù)責(zé)具體每條評(píng)論內(nèi)容的渲染：

import React, { Component } from "react"

class Comment extends Component {
  render () {
    return (
      

        

          {this.props.comment.username} ：
        

        
{this.props.comment.content}

      

    )
  }
}

export default Comment

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

馬上把 Comment 應(yīng)用到 CommentList 當(dāng)中，修改 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

可以看到測(cè)試數(shù)據(jù)顯示到了頁面上：

之前我們說過 CommentList 的數(shù)據(jù)應(yīng)該是由父組件 CommentApp 傳進(jìn)來的，現(xiàn)在我們刪除測(cè)試數(shù)據(jù)，改成從 props 獲取評(píng)論數(shù)據(jù)：

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

class CommentList extends Component {
  render() {
    return (
      

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

    )
  }
}

export default CommentList

這時(shí)候可以看到瀏覽器報(bào)錯(cuò)了：

這是因?yàn)?b>CommentApp 使用 CommentList 的時(shí)候并沒有傳入 comments。我們給 CommentList 加上 defaultProps 防止 comments 不傳入的情況：

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

這時(shí)候代碼就不報(bào)錯(cuò)了。但是 CommentInput 給 CommentApp 傳遞的評(píng)論數(shù)據(jù)并沒有傳遞給 CommentList，所以現(xiàn)在發(fā)表評(píng)論時(shí)沒有反應(yīng)的。

我們?cè)?CommentApp 的 state 中初始化一個(gè)數(shù)組，來保存所有的評(píng)論數(shù)據(jù)，并且通過 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 ：每當(dāng)用戶發(fā)布評(píng)論的時(shí)候，就把評(píng)論數(shù)據(jù)插入 this.state.comments 中，然后通過 setState 把數(shù)據(jù)更新到頁面上：

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

現(xiàn)在代碼應(yīng)該是可以按照需求正常運(yùn)作了，輸入用戶名和評(píng)論內(nèi)容，然后點(diǎn)擊發(fā)布：

為了讓代碼的健壯性更強(qiáng)，給 handleSubmitComment 加入簡單的數(shù)據(jù)檢查：

...
  handleSubmitComment (comment) {
    if (!comment) return
    if (!comment.username) return alert("請(qǐng)輸入用戶名")
    if (!comment.content) return alert("請(qǐng)輸入評(píng)論內(nèi)容")
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }
...

到這里，我們的第一個(gè)實(shí)戰(zhàn)案例——評(píng)論功能已經(jīng)完成了！完整的案例代碼可以在這里 comment-app 找到， 在線演示 體驗(yàn)。

總結(jié)

在這個(gè)案例里面，我們除了復(fù)習(xí)了之前所學(xué)過的內(nèi)容以外還學(xué)習(xí)了新的知識(shí)點(diǎn)。包括：

實(shí)現(xiàn)功能之前先理解、分析需求，劃分組件。并且掌握劃分組件的基本原則——可復(fù)用性、可維護(hù)性。

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