组合组件

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

再去定义两个 React 组件,然后再把这些组件组合到一块儿 .. 在 app/comment 下面,添加一个 js 文件 .. 名字是 CommentList.js .. 评论列表组件 .. 'use strict'; 再导入 react .. 定义一个 class ,名字是 CommentList .. 这个 class 是一个 React 组件, 所以可以让它去继承 React.Component ..

类里添加一个 render 方法 .. 返回组件要显示的东西 .. 这里先简单的添加一行文字 .. 把它放到一个 div 标签里面 .. 评论列表 .. 最后再导出这个 class ..

复制一下这个文件里的内容 .. 下面再去添加一个 js 文件 .. 位置是 app/comment .. 名字是 CommentForm.js .. 评论的表单 .. 粘贴复制的东西 .. 然后再修改一下 .. class 的名字是 CommentForm .. 要导出的东西的名字也是这个 .. CommentForm ..

再去掉 render 里要要返回的东西 ... 在这里,我们添加一个评论用的表单 .. 一组 form 标签 .. 上面加上 ui reply form 这几个类 .. 在这个表单里再添加几个元素 ... 现在它里面有三个表单元素 .. 文本框 .. 文本区域,还有一个提交按钮 .. 这个表单的样式是 semantic ui 设计的 .. 保存 ..

下面我们再去把这些组件组合到一块儿 .. 打开之前定义的 CommentBox.js .. 在这个文件的头部,先去导入 CommentList ... 复制一下 .. 再导入 CommentForm ..

在 CommentBox 的这个组件的 render 方法里 .. 可以使用标签的形式去把 CommentList 还有 CommentForm 添加进来 .. 这个标签可以是自关闭的标签 ..

打开浏览器 .. 上面会显示 CommentList 组件的评论列表 .. 还有 CommentForm 组件上的评论表单 .. 再打开,开发者工具 .. Elements .. 在这个 CommentBox 里面,你可以找到 CommentList 还有 CommentForm 要显示的东西 ..

再看一下 React 选项卡 .. 在页面上有一个 CommentBox 组件,这个组件里面,包含了 CommentList 还有 CommentForm 这两个组件 ..

组合组件《 React 基础 》

统计

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

社会化网络

关于

微信订阅号

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