React - Children对象
2016-12-14 本文已影响0人
一座被占用
新手入门,有什么不到位的地方还希望大神给予指导!
今天在学习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改成下面这个样子
就可以在页面中看到结果了:
不太会总结啊!!!继续希望以后能继续完善!