浅谈React实现评论框（一）

最新推荐文章于 2026-07-22 11:46:27 发布

原创

最新推荐文章于 2026-07-22 11:46:27 发布 · 1.2k 阅读

收录于

当前文章被以下社区和专栏收录：

本文深入探讨了使用React构建评论框的过程，包括JSX语法的优势，React.createClass()创建组件以及ReactDOM.render()启动框架。文章还介绍了如何添加子组件CommentList和CommentForm，利用props传递数据，并讲解了Markdown的使用。针对Markdown转换为HTML的问题，提出了使用第三方库remarkable进行文本转换的解决方案。

结构：

第一层——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：