浅谈React实现评论框（二）

Bertha 。 2022-06-17 09:50 209阅读 0赞

[http://blog.csdn.net/zhouziyu2011/article/details/70502495][http_blog.csdn.net_zhouziyu2011_article_details_70502495]实现了简单的评论框，但实现的只是在代码里直接插入评论数据。

实际情况是，评论数据应该是来自服务器的 JSON 数据，现在不考虑服务器，直接将 JSON 数据写在代码中：

// 模拟服务器返回的JSON数据
    var data = [
    	{id: 1, author: "Alice", text: "This is Alice's comment"},
    	{id: 2, author: "Bruce", text: "This is Bruce's comment"}
    ];
    var CommentBox = React.createClass({
    	render: function() {
    		return (
    			<div className="commentBox">
    				<h1>CommentBox</h1>
    				<CommentList data={this.props.data} />
    				<CommentForm />
    			</div>
    		);
    	}
    });
    var CommentList = React.createClass({
    	render: function() {
    		var commentNodes = this.props.data.map(function(comment) {
    			return <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
    		});
    		return (
    			<div className="commentList">
    				{commentNodes}
    			</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 data={data}/>,
    	document.getElementById('commentBox')
    );

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

发表评论取消回复

表情：

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

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

相关阅读

相关浅谈React mixins

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

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

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

1、JSX的新语法——展开属性如果事先知道组件需要的全部props（属性），可以列出；但如果事先不知道要设置哪些 props，最好不要设置它，原因有两个： ①　React

- 日理万妓/ 2022年06月17日 12:52/ 0 赞/ 250 阅读

相关浅谈React实现过滤器

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

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

相关浅谈React实现输入框

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

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

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

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

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

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

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

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

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

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

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

相关浅谈React实现搜索匹配

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

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

相关浅谈React实现todolist

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

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

相关浅谈React Hooks

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

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