本案例来自React.js中文官网对应内容。
一. 运行环境
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<!-- 核心 -->
<script src="js/react.js"></script>
<!-- 加载dom方法 -->
<script src="js/react-dom.js"></script>
<!-- 将 JSX 语法转为 JavaScript 语法 -->
<script src="js/browser.min.js"></script>
<!-- jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<!--markdown渲染引擎-->
<script type="text/javascript" src="js/remarkable.min.js"></script>
<!-- 自身的javascript代码 -->
<script type="text/javascript" src="js/js.js"></script>
</head>
二. 组件架构
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之中。
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
})
},
render:function(){
//console.log(this.props)
return (
<form>
<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>
);
}
});
组件已经变得很长很长，但是基本上也不需要想什么。
提交表单
提交表单做三件事，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')
);
效果支持简单的markdown语法：
