React.js 小书 Lesson16 - 实战分析:评论功能(三)

前端之家收集整理的这篇文章主要介绍了React.js 小书 Lesson16 - 实战分析:评论功能(三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React.js 小书 Lesson16 - 实战分析:评论功能(三)

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

转载请注明出处,保留原文链接以及作者信息

在线阅读:http://huziketang.com/books/react


接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表:

@H_301_19@// 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 ( <div>{comments.map((comment,i) => { return ( <div key={i}> {comment.username}:{comment.content} </div> ) })}</div> ) } } export default CommentList

这里的代码没有什么新鲜的内容,只不过是建立了一个 comments 的数组来存放一些测试数据的内容,方便我们后续测试。然后把 comments 的数据渲染到页面上,这跟我们之前讲解的章节的内容一样——使用 map 构建一个存放 JSX 的数组。就可以在浏览器看到效果

修改 Comment.js 让它来负责具体每条评论内容的渲染:

@H_301_19@import React,{ Component } from 'react' class Comment extends Component { render () { return ( <div className='comment'> <div className='comment-user'> <span>{this.props.comment.username} </span>: </div> <p>{this.props.comment.content}</p> </div> ) } } export default Comment

这个组件可能是我们案例里面最简单的组件了,它只负责每条评论的具体显示。你只需要给它的 props 中传入一个 comment 对象,它就会把该对象中的 usernamecontent 渲染到页面上。

马上把 Comment 应用到 CommentList 当中,修改 CommentList.js 代码

@H_301_19@import React,{ Component } from 'react' import Comment from './Comment' class CommentList extends Component { render() { const comments = [ {username: 'Jerry',content: 'Good'} ] return ( <div> {comments.map((comment,i) => <Comment comment={comment} key={i} />)} </div> ) } } export default CommentList

可以看到测试数据显示到了页面上:

之前我们说过 CommentList 的数据应该是由父组件 CommentApp 传进来的,现在我们删除测试数据,改成从 props 获取评论数据:

@H_301_19@import React,{ Component } from 'react' import Comment from './Comment' class CommentList extends Component { render() { return ( <div> {this.props.comments.map((comment,i) => <Comment comment={comment} key={i} /> )} </div> ) } } export default CommentList

这时候可以看到浏览器报错了:

这是因为CommentApp 使用 CommentList 的时候并没有传入 comments。我们给 CommentList 加上 defaultProps 防止 comments 不传入的情况:

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

这时候代码就不报错了。但是 CommentInputCommentApp 传递的评论数据并没有传递给 CommentList,所以现在发表评论时没有反应的。

我们在 CommentAppstate 中初始化一个数组,来保存所有的评论数据,并且通过 props 把它传递给 CommentList修改 CommentApp.js

@H_301_19@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 ( <div className='wrapper'> <CommentInput onSubmit={this.handleSubmitComment.bind(this)} /> <CommentList comments={this.state.comments}/> </div> ) } } export default CommentApp

接下来,修改 handleSubmitComment :每当用户发布评论的时候,就把评论数据插入 this.state.comments 中,然后通过 setState 把数据更新到页面上:

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

现在代码应该是可以按照需求正常运作了,输入用户名评论内容,然后点击发布:

为了让代码的健壮性更强,给 handleSubmitComment 加入简单的数据检查:

@H_301_19@... 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 找到, 在线演示 体验。

总结

在这个案例里面,我们除了复习了之前所学过的内容以外还学习了新的知识点。包括

  1. 实现功能之前先理解、分析需求,划分组件。并且掌握划分组件的基本原则——可复用性、可维护性。

  2. 受控组件的概念,React.js 中的 <input /><textarea /><select /> 等元素的 value 值如果是受到 React.js 的控制,那么就是受控组件。

  3. 组件之间使用 props 通过父元素传递数据的技巧。

当然,在真实的项目当中,这个案例很多地方是可以优化的。包括组件可复用性方面(有没有发现其实 CommentInput 中有重复的代码?)、应用的状态管理方面。但在这里为了给大家总结和演示,实现到这个程度也就足够了。

到此为止,React.js 小书的第一阶段已经结束,你可以利用这些知识点来构建简单的功能模块了。但是在实际项目如果要构建比较系统和完善的功能,还需要更多的 React.js 的知识还有关于前端开发的一些认知来协助我们。接下来我们会开启新的一个阶段来学习更多关于 React.js 的知识,以及如何更加灵活和熟练地使用它们。让我们进入第二阶段吧!

下一节中我们将介绍《React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升)》

猜你在找的React相关文章