react学习笔记12：this.props.children和React.Children

为什么80%的码农都做不了架构师？>>>   

React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

1.React.Children.map

我们已经知道React.Children是为了处理this.props.children准备的，

React.Children.map他就是为了遍历我们的子节点，这样才可以加入一些功能（比如事件处理）：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Slot extends React.Component {
	
	
	render() {	
		
		return <div>
			{
				React.Children.map(this.props.children, function (child) {
					return <div>{child}</div>;
				})
			}
		</div>
	}

	
	
}

ReactDOM.render(
    <div>
		<Slot><span>分发内容1</span><span>分发内容2</span><span>分发内容3</span></Slot>
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

React.Children.map循环我们的this.props.children，在回调会得到child对象，render会自己解析。

同样可以获取索引，会调用启用第二个参数：

2.为什么使用React.Children.map

拿上面的举例子，我们分发含有三个子节点，我想给第一个子节点加一个点击事件，这样我们的React.Children.map的作用就体现出来了：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Slot extends React.Component {
	
	alertval() {
		alert("我是第一个")
	}
	render() {	
		
		return <div>
			{
				React.Children.map(this.props.children, function (child,index) {
					if(index===0){
						return <div onClick={this.alertval}>{child}索引{index}</div>;
					}else{
						return <div>{child}索引{index}</div>;
					}
					
				}.bind(this))
			}
		</div>
	}

	
	
}

ReactDOM.render(
    <div>
		<Slot><span>分发内容1</span><span>分发内容2</span><span>分发内容3</span></Slot>
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

这里是注意点，避免this的指向问题，我们必须给map的回调函数bind一次：

这时候我们的第一个子节点有事件，其他的节点没有事件。

我们可以console.log(child)加入更多处理判断。

转载于:https://my.oschina.net/tbd/blog/1544798