从爸爸那里得到数据

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

之前我们在 CommentList 这个组件里面,手工的设置了要传递给 Comment 组件的数据 .. 这些数据一般应该是来自服务端 .. 你可以通过一些方法向服务端去请求数据 ..

这里我们先模拟一下 .. 打开 main.js .. 这里定义一个表示评论数据的变量 .. 名字是 comments .. 它的值是一个 json 格式的数据 .. 这里有两个项目 .. 每个项目都有一个名字 .. author 是作者 .. date 是评论发布的时间 .. text 表示评论的内容 ..

下面可以在这个 render 方法里,把这个数据传递给 CommentBox 组件 .. 添加一个 data 属性 .. 这样你可以在 CommentBox 里,得到 data 这个属性的值 .. 把它的值设置成在上面定义的这个 comments 变量 .. 把它放在一组大括号 ..

再打开 CommentBox 这个组件 .. 它里面嵌入了 CommentList 这个组件 .. 我们可以再前面用 render 方法传递过来的数据再交给 CommentList 这个组件 .. 添加一个 data 属性 .. 它的值是一组大括号 .. 里面是 this.props.data ..

然后打开 CommentList .. 我们再改造一下它的 render 方法 .. 可以循环的去处理一下传递过来的数据 .. 这里就是 this.props.data .. 定义一个变量 .. 名字是 commentNodes .. 它的值是循环的处理数据之后的结果 .. this.props.data .. 这里就是传递过来的数据 .. 使用一个 map 方法 .. 去处理一下每条评论的数据 ..

在它里面用一个箭头函数 .. comment 是函数的参数 .. 一个箭头 .. 它的右边是函数具体要做的事情 .. 一组大括号 .. 里面用一个 return .. 返回一些东西 .. 再用一组括号 .. 返回的就是每条评论的内容 .. 添加一组 Comment 标签 .. 设置一下要传递给 Comment 这个组件的数据 ..

用一个 author 属性 .. 它的值是 {comment.author}.. 再用一个 date .. 值是 {comment.date} .. 这组 Comment 标签之间,再用一个 {comment.text} ...

这样这个组件真正返回的东西可以是一组 div 标签 .. 里面的东西可以使用 commentNodes 来表示 .. 保存 .. 打开浏览器 ..

上面会显示评论的内容 .. 这个评论里的数据是从 ReactDOM.render 方法里,传递给 CommentBox 组件,再从 CommentBox 组件传递给 CommentList .. 在这个组件里循环的处理了一下传递过来的每条评论 .. 每次处理都会用一下 Comment 组件,把评论上的数据,比如作者,日期,还有评论的内容交给 Comment 组件。

从爸爸那里得到数据《 React 基础 》

统计

13679
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点