资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React.js 小书 Lesson16 - 实战分析：评论功能（三）

React.js 小书 Lesson16 - 实战分析：评论功能（三）

Gilbertat / 2039人阅读

摘要：但是给传递的评论数据并没有传递给，所以现在发表评论时没有反应的。包括实现功能之前先理解分析需求，划分组件。到此为止，小书的第一阶段已经结束，你可以利用这些知识点来构建简单的功能模块了。

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 中的 、