react学习笔记11：this.props.children和分发

我们知道组件除了单标签调用还可以闭合标签调用：

<Tab />

或者：

<Tab></Tab>

1.分发处理

对于下面这种结构，我们在组件中怎么获取包括的结构：

在组件中，我们知道this.props可以拿到调用位置传递的任意属性，同样的react还为我们提供了this.props.children

来获取调用位置包含的结构。

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


//设置组件
class Slot extends React.Component {
	

	
	render() {	
		
		return <div>
			{this.props.children}
		</div>
	}

	
}


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

审查元素：

同样可以设置多个分发内容：

我们console.log(this.props.children)

2.分发组件

我们把里面的静态结构修改为一个组件的调用：

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


//设置组件
class Slot extends React.Component {
	
	
	render() {	
		
		return <div>
			{this.props.children}
		</div>
	}
	componentDidMount() {
	   console.log(this.props.children)
	}
	
	
}
//设置组件2
class Slot2 extends React.Component {
		
	render() {	
		
		return <div>
			我是组件2
		</div>
	}
	
	
}

ReactDOM.render(
    <div>
		<Slot><Slot2></Slot2></Slot>
	</div>,document.getElementById('root')
);
registerServiceWorker();

我们会发现this.props.children同样可以识别解析。