记录React中的Context使用方法(仅记录使用)

首先需要了解Context几个语法

React.createContext(默认值)创建一个context容器,里面保存着默认值

Provider是一个生产者就是分享值的标签吧<Provider value={defaultValue}></Provider>，defaultValue意思是要给标签内部引用组件传的值

Consumer是一个消费者可以理解为接受Provider传下来的值，用法如下

<Consumer>{(value)=>{   //此时的value是Provide标签里面value的值

}} 在此箭头函数中就可以使用参数value

以下是两种方法实现一种功能，就是子组件和孙组件不需要一层一层props传递直接使用组件树上的属性

父组件

import Son from "./components/Test/Son";

let name ="小人头"
export const testContext = React.createContext(name);

const App: React.FC = (props) => {
    return (
        <div className={styles.app}>
            <testContext.Provider value={"dsadsa"}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px 
auto',textAlign:'center'}}>
                    <p>父组件定义的值:{name}</p>
                    <Son />
                </div>
            </testContext.Provider>  
        </div>  
    )
}

子组件

import React, {useContext} from 'react';
import Grandson from './GrandSon'
import {testContext} from '../../App'

function Son() {
    const value = useContext(testContext)
    return (
        <div style={{border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center'}}>
            <p>子组件。获取父组件的值:{value}</p>
            <Grandson/>
        </div>
    );
}

export default Son;

孙组件

import React, {useContext} from 'react';
import {testContext} from '../../App'

function GrandSon() {
    const value = useContext(testContext)
    return (
        <div style={{border: '1px solid green', width: '60%', margin: '50px auto', textAlign: 'center'}}>
            <p>孙组件。获取传递下来的值:{value}</p>
        </div>
    );
}

export default GrandSon;

上述代码输出结果是，父组件name是小人头，子组件和孙组件的name值都是dsadsa

第二种方法

父组件

import Son from "./components/Test/Son";
let name ="小人头"
export const {Provider,Consumer} = React.createContext(name);

const App: React.FC = (props) => {
    return (
        <div className={styles.app}>
            <Provider value={name}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                    <p>父组件定义的值:{name}</p>
                    <Son />
                </div>
            </Provider>            
        </div>
    );
}

子组件

import React from 'react';
import {Consumer} from '../../App'
import Grandson from './GrandSon'

function Son() {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {( name ) =>
                <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
                    <p>子组件。获取父组件的值:{name}</p>
                    {/* 孙组件内容 */}
                    <Grandson />
                </div>
            }
        </Consumer>
    );
}

export default Son;

孙组件

import React from 'react';
import {Consumer} from '../../App'

function GrandSon() {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {(name ) =>
                <div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
                    <p>孙组件。获取传递下来的值:{name}</p>
                </div>
            }
        </Consumer>
    );
}

export default GrandSon;

上述代码输出结果是，父组件,子组件和孙组件的name值都是dsadsa