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改成下面这个样子

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


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

上一篇下一篇

猜你喜欢

热点阅读