React - Children对象

新手入门,有什么不到位的地方还希望大神给予指导!

今天在学习react代码的时候遇到的问题:React.Children是什么?

前提:1. 父子组件A 和 B

我们知道React父子组件之间的传递是通过 props 来实现的,先看个例子:

运行就可以在调试界面看到页面的代码是<div><div>content1</div><div>content2</div></div>

上面的例子中可以看出<div>框是我们熟知的html标签,

我们再看个例子:


形如上面的代码,返回的是<div>content1</div>,在A中打印出来this.props信息是下面这个样子的

好,到这里就遇到了我们现在遇到的问题:如何控制传入的elements呢?

在组件 A 中可以通过 this.props.children可以访问到 B 中传入的两个 span 标签,React提供了几个方法,让我们对他们进行处理:

1.React.Children.count(this.props.children):获取有几个标签,很显然,在本例子中是两个

2.React.cloneElement(children,[object props],[children . . . ]):这个方法是将 element 完全复制(克隆)

基于上面的方法,讲组件A改成下面这个样子

就可以在页面中看到结果了:


不太会总结啊!!!继续希望以后能继续完善!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容