React 插槽slot

最新推荐文章于 2024-07-29 21:59:15 发布

Jcsl12

最新推荐文章于 2024-07-29 21:59:15 发布

阅读量8.2k

点赞数

文章标签： react 插槽 slot

本文链接：https://blog.csdn.net/u010054790/article/details/82904093

版权

学react有一有段时间了，最近开始用RN，试着写了几个组件，今天开RN官网有这样一个组件

之前想给父组件插入子组件，一直用props，最近正好想写个select下拉，但是考虑到option部分数量不固定，没法用props，但是看到上面这个组件，PIcker里可以所以插入Picker.Item，还有像atnd的CheckGroup也可以插入Checkbox，很好奇，一直不明白，查了三个多小时，才发现，react有个this.props.children，这个props，不同于普通的，他是父组件的所有子组件，所以，父组件可以任意插入插入子组件，然后当做普通props去渲染，bingo，问题解决了。

需要注意的是当子节点数量为0是this.props.children是undefined，一个的时候this.props.children是object，多个的时候是array。

像这样我刚写了个组件

<JcsCheckBoxGp onChange={()=this._chg()}>
    <JcsOption label='jackie'/>
    <JcsOption label='bruce'/>
    <JcsOption label='bill/>
</JcsCheckBoxGp>

真是豁然开朗，还是基础不扎实，大家绕坑吧