浅谈React实现评论框（一）

结构：

第一层——CommentBox  

第二层——CommentList    

第三层——Comment  

第二层——CommentForm

 

1、JSX语法：

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				CommentBox
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('commentBox')
);

JSX是XML式的语法，预编译器会将语法糖转换成单纯的JavaScript：

var CommentBox = React.createClass({
	displayName: 'CommentBox',
	render: function() {
		return (
			React.createElement('div', {className: "commentBox"},"CommentBox")
		);
	}
});
ReactDOM.render(
	React.createElement(CommentBox, null),
	document.getElementById('commentBox')
);

显而易见，JSX 语法比单纯的JavaScript更加容易使用。

React.createClass() 创建一个新的React组件，组件的方法中最重要的是 render，该方法返回一棵React组件树，这棵树最终将会渲染成 HTML。

<div> 标签不是真实的DOM节点，是 React div 组件的实例化。

ReactDOM.render() 实例化根组件，启动框架，注入到原始的 DOM 元素（第二个参数）中。

 

2、添加子组件CommentList和CommentForm

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				CommentBox
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				CommentList
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentForm
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('commentBox')
);

3、添加Comment组件并使用props

从父级传来的数据在子组件里作为属性可供使用，可以通过 this.props 访问。通过this.props .*访问传递给组件的命名属性，通过this.props.children 访问任何嵌套的元素。

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>CommentBox</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="Alice">This is Alice's comment</Comment>
				<Comment author="Bruce">This is Bruce's comment</Comment>
			</div>
		);
	}
});
var Comment = React.createClass({
	render: function() {
		return (
			<div className="comment">
				<h3>{this.props.author}</h3>
				{this.props.children}
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentForm
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('commentBox')
);

 

4、添加 Markdown

Markdown 是一种简单的内联格式化文字的方法，如用星号包围的文本将会强调突出。

使用第三方库 remarkable，它接受 Markdown 文本并且转换为原始的 HTML。

调用toString()可以将文本转换成remarkable 能理解的原始字符串。

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>CommentBox</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="Alice">This is *Alice's* comment</Comment>
				<Comment author="Bruce">This is Bruce's comment</Comment>
			</div>
		);
	}
});
var Comment = React.createClass({
	render: function() {
		var remarkable = new Remarkable();
		return (
			<div className="comment">
				<h3>{this.props.author}</h3>
				{remarkable.render(this.props.children.toString())}
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentForm
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('commentBox')
);

问题：星号包围的文本将只是转换成<em>和</em>包裹的内容（<p>This is <em>Alice's</em> comment</p>），而需要的是真正地渲染为 HTML。

解决：

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>CommentBox</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="Alice">This is *Alice's* comment</Comment>
				<Comment author="Bruce">This is Bruce's comment</Comment>
			</div>
		);
	}
});
var Comment = React.createClass({
	remark: function() {
		var remarkable = new Remarkable();
		var remark = remarkable.render(this.props.children.toString());
		return { __html: remark };
	},
	render: function() {
		return (
			<div className="comment">
				<h3>{this.props.author}</h3>
				<span dangerouslySetInnerHTML={this.remark()} />
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentForm
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('commentBox')
);

以上只是实现了将评论数据直接写在CommenList组件中，实际上评论数据应该是来自服务器的JSON数据。 http://blog.csdn/zhouziyu2011/article/details/70504651将继续进行介绍。