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

前端之家收集整理的这篇文章主要介绍了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同样可以识别解析。

猜你在找的React相关文章