React.js入门笔记(再续)：评论框的实现

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

本案例来自React.js中文官网对应内容。

一. 运行环境

二. 组件架构

App下有两个子组件CommentList（评论列表）和CommentForm（评论区），其中CommentList下又有一个子组件Comment（评论）

- App - CommentList - Comment - CommentForm

Comment包括一个h2的评论人名称，一个span的评论内容，获取数据之后，Comment组件以数组的形式传入CommentList。

三. 流动数据

接下来就是把这5个组件写出来。

// 最底层的组件Comment，隶属于CommentList var Comment=React.createClass({ render:function(){ return ( ); } }); // 中层对象，包括CommentList和CommentForm var CommentList=React.createClass({ render:function(){ return ( ); } }); var CommentForm=React.createClass({ render:function(){ return ( ); } }); // 最高层对象App,包括两个中层组件 var App=React.createClass({ render:function(){ return ( ); } }); // 渲染模块 ReactDOM.render( <App/>, document.getElementById('example') );

数据通过props传入App，可以在html文件根目录下创建一个“json.json”文件：放入以下内容：

[ {"id": 1, "author": "小明", "text": "小明摸摸大"}, {"id": 2, "author": "小红", "text": "小红萌萌哒"} ]

所以我只要给App传递一个url即可。然后在文档插入之后执行jQuery的getJSON方法：最后在存入到App的state中。每次更新state，对会造成变化。

既然state可以实时更新，那么不如设置一个定时器，每隔2s执行一次数据刷新。刷新间隔由App的props.timer传入。

目前的组件变成了这样

// 最底层的组件Comment，隶属于CommentList var Comment=React.createClass({ render:function(){ return ( <li> <h2>{this.props.author}</h2> <span>{this.props.text}</span> </li> ); } }); // // 中层对象，包括CommentList和CommentForm var CommentForm=React.createClass({ render:function(){ //console.log(this.props) return ( <div></div> ); } }); var CommentList=React.createClass({ render:function(){ var arr=[]; this.props.data.map(function(item){ //console.log(item.author) var content= ( <Comment author={item.author} text={item.text} key={item.id}/> ); arr.push(content); }); console.log(arr) return ( <ul>{arr}</ul> ); } }); // 最高层对象App,包括两个中层组件 var App=React.createClass({ getInitialState:function(){ return { data:[] }; }, loadServer:function(){ var _this=this; $.getJSON(this.props.url,function(data){ _this.setState({ data:data }) }); }, componentDidMount:function(){ console.log(this.props.timer) var _this=this; setInterval(function(){ _this.loadServer(); },_this.props.timer) }, render:function(){ //console.log(this.state) return ( <div> <h1>当前评论</h1> <CommentList data={this.state.data}/> <CommentForm/> </div> ); } }); // 渲染模块 ReactDOM.render( <App url="json.json" timer={2000}/>, document.getElementById('example') );

数据就流动起来了。如果你修改了服务器，定时器会在2s后重新更新所得到的数据。

四. markdown语法

这部分主要是调用remarkable插件，渲染你看到的数据。而渲染自然是在底层的Comment组件上完成。

所以我把Comment组件改成这样：

// 最底层的组件Comment，隶属于CommentList var Comment=React.createClass({ render:function(){ var md=new Remarkable();//调用插件 var commentContent=md.render(this.props.text.toString());//渲染获得的字符串！ return ( <li> <h2>{this.props.author}</h2> <span>{commentContent}</span> </li> ); } });

结果就搞笑了。纯文本在渲染引擎渲染之后变成了带P标签的内容。

解决方案：再此需要一个官方定义的props——

dangerouslySetInnerHTML

实现方法如下：

// 最底层的组件Comment，隶属于CommentList var Comment=React.createClass({ getContent:function(){ var md=new Remarkable();//调用插件 var commentContent=md.render(this.props.text.toString());//渲染获得的字符串！ return ({ __html:commentContent });//注意是两个下划线！ }, render:function(){ return ( <li> <h2>{this.props.author}</h2> <span dangerouslySetInnerHTML={this.getContent()}/> </li> ); } });

五.添加新评论

到目前为止一切看起来还算简单。现在需要加新的评论。

CommentForm添加的是一个新的表单。里面包含了评论的大名，评论内容，还有提交按钮。

var CommentForm=React.createClass({ render:function(){ //console.log(this.props) return ( <form> <input type="text" placeholder="你的大名"/><br/> <textarea type="text" placeholder="评论内容"></textarea><br/> <button type="submit">提交</button> </form> ); } });

在实现这个组件的时候，需要考虑它的状态。文本框的内容显然是状态。所以用一个state来保存它的状态。输入一次就保存一次并返回到文本框的value之中。

组件已经变得很长很长，但是基本上也不需要想什么。

提交表单

提交表单做三件事，onSubmit在form标签上。

阻止跳转（e.preventDefault）
清空form的内容
返回到服务器并刷新列表

<form onSubmit={this.submit}>...

submit函数：

... submit:function(e){ e.preventDefault(); // 接下来格式化获取内容！注意去掉评论头尾的空格。 var authorStr=this.state.author.trim(); var textStr=this.state.text.trim(); if(!textStr||!authorStr){ alert('你有地方忘了填！'); return false; }//简单的表单校验 this.setState({ author:'', text:'' });//清空表单内容 }, ...

这就实现了前两步，但是提交到服务器并刷新好像用前端的方法无法实现。

我们之前做了每隔两秒钟刷新一次，所以每次都要拿数据，在这个案例中不现实。

所以为了不涉及太多无关知识，把定时器拿掉。

先不理它，还是做回调函数，把状态反馈到App：并刷新App的state：

返回的callback应该包括评论人名字，评论内容，说白了就是把这个对象扔进去作为参数。

那么id值呢？就用一个Data对象给他生成吧！（Date.now()）

// 最底层的组件Comment，隶属于CommentList var Comment=React.createClass({ getContent:function(){ var md=new Remarkable();//调用插件 var commentContent=md.render(this.props.text.toString());//渲染获得的字符串！ return ({ __html:commentContent });//注意是两个下划线！ }, render:function(){ return ( <li> <h2>{this.props.author}</h2> <span dangerouslySetInnerHTML={this.getContent()}/> </li> ); } }); // // 中层对象，包括CommentList和CommentForm var CommentForm=React.createClass({ getInitialState:function(){ return ({ author:"", text:"" }); },//初始化状态 authorChange:function(e){ this.setState({ author:e.target.value, }); }, textChange:function(e){ this.setState({ text:e.target.value, }) }, submit:function(e){ e.preventDefault(); // 接下来格式化获取内容！注意去掉评论头尾的空格。 var authorStr=this.state.author.trim(); var textStr=this.state.text.trim(); if(!textStr||!authorStr){ alert('你有地方忘了填！'); return false; }//简单的表单校验 this.props.callback({ "author":authorStr, "text":textStr });// 提交到服务器！ this.setState({ author:'', text:'' });//清空表单内容 }, render:function(){ //console.log(this.props) return ( <form onSubmit={this.submit}> <input type="text" placeholder="你的大名" value={this.state.author} onChange={this.authorChange}/><br/> <textarea type="text" placeholder="评论内容" value={this.state.text} onChange={this.textChange}></textarea><br/> <button type="submit">提交</button> </form> ); } }); var CommentList=React.createClass({ render:function(){ var arr=[]; this.props.data.map(function(item){ var content= ( <Comment author={item.author} text={item.text} key={item.id}/> ); arr.push(content); }); return ( <ul>{arr}</ul> ); } }); // 最高层对象App,包括两个中层组件 var App=React.createClass({ getInitialState:function(){ return { data:[] }; }, loadServer:function(){ var _this=this; $.getJSON(this.props.url,function(data){ _this.setState({ data:data }) }); }, componentDidMount:function(){ this.loadServer(); // 服务器环境设置 // var _this=this; // setInterval(function(){ // _this.loadServer(); // },_this.props.timer) }, refreshComment:function(comment) { console.log(comment)//假设已经提交了 comment.id=Date.now()//给他一个id值！ var newComments=this.state.data.concat([comment]);//把它桥接起来！ console.log(newComments) // 接下来再获取一次。 // 服务器环境下可以这样做 // $.ajax({ // url: this.props.url, // dataType: 'json', // type: 'POST', // data: comment, // success: function(data) { // //console.log(data) // this.setState({data: data}); // }.bind(this), // error: function(xhr, status, err) { // console.error(this.props.url, status, err.toString()); // }.bind(this) // }); //非服务器环境设置一个新状态就可以了。 this.setState({ data:newComments }) }, render:function(){ //console.log(this.state) return ( <div> <h1>当前评论</h1> <CommentList data={this.state.data}/> <CommentForm callback={this.refreshComment}/> </div> ); } }); // 渲染模块 ReactDOM.render( <App url="json.json" timer={2000}/>, document.getElementById('example') );