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

前端之家收集整理的这篇文章主要介绍了react学习笔记12:this.props.children和React.Children前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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)加入更多处理判断。

猜你在找的React相关文章