属性 - props

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

组件里面可以包含一些数据,这些数据一般都是它爸爸传递给它的 .. 下面再去定义一个叫 Comment 的组件 .. 把它放到 CommentList 里面, 再从 CommentList 组件里传递一些数据到 Comment 组件里 .. 这些数据会作为子组件里的属性,也就是你可以在 Comment 里面,使用这些属性得到它爸爸给它的数据。

这些属性可以在 this.props 里面访问到,在后面要加上属性的具体的名字 .. 在 app/comment 的下面添加一个 js 文件,名字是 Comment.js .. 先用一个 'use strict'; .. 再导入 react ... 然后定义一个 class .. 名字是 Comment .. 继承 React.Component .. 添加一个 render 方法 .. 返回一些东西 ..

先用一个 div 标签 .. 上面添加一个 class .. 名字是 comment .. 它里面又是一组 div .. 上面再加上一个 content 类 .. 在它的里面, 再用一组 span . . 上面加上 author 这个类 .. 它里面的东西就是评论的作者 ..

这里我们用一个属性来表示 .. 先用一组大括号 .. this.props .. 后面是属性的名字 .. 比如 author .. 一会儿我们会从 Comment 组件的父组件那里传递这个属性的值 ..

然后是一组 div .. 加上一个 metadata,它里面可以放一些评论相关的信息,比如评论的时间 .. 用一个 span 标签,加上 date 这个类 .. 在这里用一个属性 .. 一组大括号 .. this.props.date .. 属性的名字是 date ..

在它下面再添加一组 div 标签 .. 加上一个 text 类 .. 这个标签里放的是评论的内容 .. 同样使用一个属性 .. 一组大括号 .. this.props .. 这里我们用一个特殊的属性的名字 .. children .. 一会再解释这个属性的值在什么地方..

最后再给 Comment 作为默认的东西导出来 .. 然后打开 CommentList .. 在文字的头部,先导入 Comment .. 位置就是当前目录下的 Comment 这个文件 ..

在这个组件要显示的东西里面 .. 我们用一下 Comment 这个组件 .. 周围需要添加一个包装 .. 直接用这个 div 标签 .. 添加一个开始标签 .. Comment .. 再输入一个结束标签 /Comment ..

在这个标签上,我们可以添加一个 author 属性 .. 这个属性就是 Comment 里面需要的 author .. 直接设置一下它的值 .. 再设置一下 date 这个属性 .. 给它一个值 ...

然后在这个开始还有结束标签之间,再输入点文字 .. 这里的东西就是 this.props.children .. 天气不错哦 ..

再复制一行 .. 修改一下 author 属性的值 .. 然后是评论的内容 ..

保存 ... 打开浏览器 .. 上面会显示评论的内容 .. 打开开发者工具里的 Elements 选项卡 .. 在 comments 下面,包装的是 CommentList ,CommentList 里面用了 Comment 组件, 这里你会看到有两个带 comment 类的 div 标签 ..

再看一下 React 选项卡 .. CommentBox 包装 CommentList,CommentList 包装了两个 Comment .. 选中其中的一个 .. 在右边这里会显示上面的 props ..

属性 - props《 React 基础 》

统计

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

社会化网络

关于

微信订阅号

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