将Father 组件中的数据(状态数据或非状态数据) 传递给 Son1组件
context 上下文对象传值有两种方式:
1、
父组件发送数据: 父组件通过 Context 对象中 provider 属性 向指定的目标组件(Son1)传递指定的数据 value属性绑定传值对象(value名称不能随意修改)
目标组件(Son1)接收数据: 定义静态变量 static contextType ,将Context(FatherContext) 对象赋值赋值给contextType,再通过 this.context 进行 value 属性值接收
练习一:
Father.jsx:
import { Component } from 'react';
import Son from './Son';
import FatherContext from './FatherContext';
const { Provider } = FatherContext;
class Father extends Component {
state = {
person: {
name: '张三',
age: 300
}
}
render() {
return (
<div>
<h1>Father组件:</h1>
<h3>{this.state.person.name} --- {this.state.person.age}</h3>
<button onClick={this.handleAge.bind(this)}>修改person age</button>
<hr/>
{/* <FatherContext.Provider value={{person: this.state.person, msg: 'Hello'}}>
<Son/>
</FatherContext.Provider> */}
<Provider value={{person: this.state.person, msg: 'Hello'}}>
<Son/>
</Provider>
</div>
)
}
handleAge(){
this.setState({
person: {...this.state.person, age: new Date().getTime()}
});
}
}
export default Father;
FatherContext.js:
/*
创建 Father 组件所需的 Context
*/
import { createContext } from 'react';
/*
createContext(params) : 创建Context对象 params: 任意类型(基础类型、 引用类型) 给新建的Context对象设置默认值 在对应的组件中没有提供 Provider 则目标组件获取 默认值
*/
const FatherContext = createContext();
export default FatherContext;
Son.jsx:
import { Component } from 'react';
import Son1 from './Son1';
class Son extends Component {
render() {
return (
<div>
<h1>Son组件:</h1>
<hr/>
<Son1/>
</div>
)
}
}
export default Son;
Son1.jsx:
import { Component } from 'react';
import FatherContext from './FatherContext';
class Son1 extends Component {
// 指定静态 contextType 变量值为 接收上下文对象(FatherContext) 注:contextType不能随意修改
// static contextType = FatherContext;
render() {
console.log('Son1 this.context=>', this.context);
const { msg, person } = this.context;
return (
<div>
<h1>Son1组件:</h1>
<h4>msg: {msg}</h4>
<h4>person: {person.name} --- {person.age}</h4>
</div>
)
}
}
Son1.contextType = FatherContext;
export default Son1;
练习二:
将Father 组件中的数据(状态数据或非状态数据) 传递给 Son1组件
context 上下文对象传值有两种方式:
2、多个父组件 传值给子组件(Father、Son 同时传值给 Son1)
父组件发送数据: 父组件通过 Context 对象中 provider 属性 向指定的目标组件(Son1)传递指定的数据 value属性绑定传值对象(value名称不能随意修改)
目标组件(Son1)接收数据: 通过 Context 对象中提供的consumer 进行接收
Father.jsx
import { Component } from 'react';
import Son from './Son';
import FatherContext from './FatherContext';
const { Provider } = FatherContext;
class Father extends Component {
state = {
content: 'Hello Father',
}
render() {
return (
<div>
<h1>Father组件:</h1>
<hr/>
{/* <FatherContext.Provider>
<Son/>
</FatherContext.Provider> */}
<Provider value={this.state.content}>
<Son/>
</Provider>
</div>
)
}
}
export default Father;
FatherContext.js
/*
创建 Father 组件所需的 Context
*/
import { createContext } from 'react';
/*
createContext(params) : 创建Context对象 params: 任意类型(基础类型、 引用类型) 给新建的Context对象设置默认值
*/
const FatherContext = createContext('Father Context默认值');
export default FatherContext;
Son.jsx
import { Component } from 'react';
import Son1 from './Son1';
import SonContext from './SonContext';
class Son extends Component {
render() {
return (
<div>
<h1>Son组件:</h1>
<hr/>
<SonContext.Provider value={'Hello Son'}>
<Son1/>
</SonContext.Provider>
</div>
)
}
}
export default Son;
Son1.jsx
import { Component } from 'react';
import FatherContext from './FatherContext';
import SonContext from './SonContext';
/*
目标组件(Son1) 接收多个Context 对象:
通过 Conext 对象 提供的consumer 属性接收
*/
class Son1 extends Component {
render() {
console.log('Son1 this.context=>', this.context);
return (
<div>
<h1>Son1组件:</h1>
{/* <SonContext.Consumer>
{
function(sonValue){
return (
<h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
)
}
}
</SonContext.Consumer>
<FatherContext.Consumer>
{
function(fatherValue){
return (
<h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
)
}
}
</FatherContext.Consumer> */}
{/* <SonContext.Consumer>
{
sonValue => (
<h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
)
}
</SonContext.Consumer>
<FatherContext.Consumer>
{
fatherValue => (
<h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
)
}
</FatherContext.Consumer> */}
<SonContext.Consumer>
{
sonValue => (
<div>
<h3 className="h3 text-danger">接收Son传递的值:{sonValue}</h3>
<FatherContext.Consumer>
{
fatherValue => (
<h3 className="h3 text-danger">接收Father传递的值:{fatherValue}</h3>
)
}
</FatherContext.Consumer>
</div>
)
}
</SonContext.Consumer>
</div>
)
}
}
export default Son1;
SonContext.js
import {createContext} from 'react';
const SonContext = createContext('Son Context 默认值');
export default SonContext;