用户登录

React 组件有个特别的属性叫 children,使用组件的时候,在组件开始元素与结束元素之间的东西会作为组件的 children 属性的值。下面我们一块儿定义一个卡片组件,在这个组件里用一下 children 属性,现在界面上显示的内容列表可以用一下这个卡片组件。

新建一个文件,放在 src/app/components 里面,名字是 app-card.tsx。打开 app-card.tsx 这个文件,在文件里定义一个函数类型的组件,名字是 AppCard,

组件的视图用一个 div 元素,添加一个 className ,值是 app-card。然后我们可以从组件的属性里面把 children 解构出来。

会提示组件的属性里不包含 children ,可以在组件的属性的类型里添加一个 children,类型设置成 ReactNode,在文件顶部从react 这个包里导入 ReactNode。

然后在组件的视图里,在这个 div 元素里面,再添加一个 div,className 是 content ,在元素里绑定输出这个 children。

打开 PostIndex 组件,在文件顶部导入 AppCard ,它的位置相对于当前文件来说是在上一级目录的上一级目录下面的 app/components 里面,名字是 app-card。

然后在组件的 render 方法这里,可以用一下 AppCard 这个组件,一个开始元素,一个结束元素,把之前的这些东西放到它们中间。然后把这个 key 属性可以放在 AppCard 组件上。再去掉这个 div 标签。

在浏览器预览一下,现在界面上显示的这组内容列表就会用到 AppCard 组件定义的视图来展示。检查一下列表项目元素,每个列表项目都会有一个带 。

React 组件的 children 属性《 React.js 前端应用开发:定义组件 》

统计

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

社会化网络

关于

微信订阅号

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