React-组件通讯

Posted 2021-08-30 CaoPengCheng&

React-组件通讯

（1）父组件 -> 子组件
（2）子组件 -> 父组件
（3）兄弟组件
（4）Contxt

【1】父组件 -> 子组件

（1）父组件提供要传递的state数据
（2）给子组件标签添加属性，值为state中的数据
（3）子组件通过props接收到父组件中传递的数据

class Parent ectends React.Component{
state = {lastName:'王'}
	renser(){
		return(
			<div>
				传递数据给子组件
				<Chind name={this.state.lastName} />
			</div>
		)
	}
}

const Child = (props)=>{
	return(
		<div>
			子组件接收到数据
			{props.name}
		</div>
	)
}

【2】子组件 -> 父组件

利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
（1）父组件提供一个回调函数（用于接收数据）
（2）将函数作为属性的值，传递给子组件

class Parent extends React.Component{
getChildMsg = (msg) =>{
	console.log('接收到子组件数据'，msg)
}
render(){
	return(
		<div>
			子组件
			<Chind getMsg={this.getChildMsg} />
		</div>
	)
}
}

【3】兄弟组件

状态提升：将共享状态提升到最近的公共组件中，由公共父组件管理这个状态
公共父组件职责：
		a,提供共享状态
		b,提供操作共享状态的方法
要通讯的子组件只需要通过props接受状态或操作状态的方法

【4】Contxt

跨组件传递数据(主题，语言)
（1）调用React.createContext()创建Provider（提供数据）和Consumer（消费数据）两个组件
	const {Provider,Consumer} = React.createContext()
（2）使用Provider组件作为父节点

<Provider>
			<div className="App">
				<Child1 />
			</div>
		</Provider>

（3）设置value属性，表示传递的数据
	<Provider value="pink">
（4）调用Consumer组件接收数据
	<Consumer>
		{data => <span>data参数表示接收到的数据--{data}</span>}
	</Consumer>