浅谈React实现评论框（一）

心已赠人 2022-06-17 09:49 282阅读 0赞

结构：

第一层——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.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu2011_article_details_70504651]将继续进行介绍。

[http_blog.csdn.net_zhouziyu2011_article_details_70504651]: http://blog.csdn.net/zhouziyu2011/article/details/70504651

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 202 阅读

相关浅谈React的JSX语法（一）

最好的解决方案是：通过JavaScript直接生成模板，然后去构建用户界面。为了使其变得更简单，有一个非常简单、可选的类似HTML的语法，通过函数调用即可生成模板的编译器

痛定思痛。/ 2022年06月17日 12:46/ 0 赞/ 194 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 227 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 332 阅读

相关浅谈React实现评论框（三）

[http://blog.csdn.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu

叁歲伎倆/ 2022年06月17日 10:51/ 0 赞/ 250 阅读

相关浅谈React实现评论框（二）

[http://blog.csdn.net/zhouziyu2011/article/details/70502495][http_blog.csdn.net_zhouziyu

Bertha 。/ 2022年06月17日 09:50/ 0 赞/ 169 阅读

相关浅谈React实现评论框（一）

结构：第一层——CommentBox 第二层——CommentList 第三层——Comment 第二层——CommentForm 1、JSX

心已赠人/ 2022年06月17日 09:49/ 0 赞/ 283 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 191 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 177 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 244 阅读