React多组件传值之context

最新推荐文章于 2024-06-07 22:09:22 发布

原创最新推荐文章于 2024-06-07 22:09:22 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

组件传值专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React应用中使用Context API实现父子组件之间的数据共享，通过Provider和Consumer组件展示了如何将`father`组件的状态（user和age）传递给`Son`组件，并进一步传给`Grandson`组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React ,{ Component } from 'react';
//创建Context对象
const MyContext = React.create.Context()
//解构Provider
const { Provider } = MyContext


//Father组件
class Father extends Component{
	state:{
		user:'我是爸爸',
		age:18
	}
	render(){
	const { name, age } = this.state
		return(
			<div>
				我是Father组件
				<Provider>
					//此处的value属性，名字不可自定义
					<Son value={{name, age }}/>
				<Provider/>
			</div>

		)
	}
} 
export default Father


//Son组件
class Son extends Component{
	render(){
		return(
			<div>
				我是Son组件
				<Grandson/>
			</div>
		)
	}
} 
export default Son


//Grandson组件
class Grandson extends Component{
	//声明接受Context
	static contextType = MyContext
	console.log("this.context.name："，this.context.name)//this.context.name:我是爸爸
	console.log("this.context.age："，this.context.age)//this.context.age:18
	render(){
		return(
			<div>
				我是Grandson组件
			</div>
		)
	}
} 
export default Grandson


//若为函数组件
const { Provider, Consumer } = MyContext
function Grandson(){
	return(
		<div>
			我是Grandson组件
			<Consumer>
				{value => `${value.name},${value.age}`}
			<Consumer/>
		</div>
	)
}