react---context上下文信息

react—context 上下文信息

• 1. 创建 context 对象
• 2. 对上线文对象处理，目的是提供者和消费者配对
• 3. 通过 provider value 属性提供数据
• 4. 通过 consumer 消费者获取数据
• 5. context 上下文的数据直接修改无效，在传递 value 的同时传递一个修改上下文的方法
• 6. 是否能够放多个上下文

外部封装方法

import { createContext } from "react";
const NameContext = createContext();
NameContext.displayName = "NameContext";
const { Consumer, Provider } = NameContext;
export default NameContext;
export { Consumer, Provider };

写入值

• 在一个组件上通过 value 挂载一个值，只要是他的子组件就可以获取到这个值，不管是字辈还是孙辈，只要是子级就可以获取
  import { Provider } from "./nameContext";

  <Provider value={{ name }}>
    <div>
      <h1>contextDemo</h1>
      <Son1></Son1>
      <Son2></Son2>
    </div>
  </Provider>
  

获取值

• 1.可以通过 Consumer 来获取，在Consumer中写一个渲染函数，这个函数的参数就是 value 值

  • 单个 context

    import { Consumer } from "./nameContext";
    
    <!-- 传值 -->
    <Provider value={{ name }}>
      <ColorContext.Provider value={{ color: 'red' }}>
        <div>
          <h1>contextDemo</h1>
          <Son1></Son1>
          <Son2></Son2>
        </div>
      </ColorContext.Provider>
    </Provider>
    
    <!-- 获取 -->
    <Consumer>
      {(context) => {
        console.log("nameContext", context);
        return (
          <div className="grandson2">
            <h2>孙子组件2</h2>
            {context.name}
            <button
              onClick={() => {
                context.changeName("王心凌");
              }}
            >
              改context名字
            </button>
          </div>
        );
      }}
    </Consumer>;
    

  • 多个 context

    import ColorContext from "./colorContext";
    
    <!-- 传值 -->
    <ColorContext.Provider value={{ color: 'red' }}>
      <div>
        <h1>contextDemo</h1>
        <Son1></Son1>
        <Son2></Son2>
      </div>
    </ColorContext.Provider>
    
    <!-- 获取 -->
    <ColorContext.Consumer>
      {(value) => {
        console.log("ColorContext.Consumer", value);
        return <div>div</div>;
      }}
    </ColorContext.Consumer>;
    

• 2.通过contextType来获取，后面的值就是

  • 这个方法只能赋值一个上下文，多个还需要通过 consumer 来实现
    static contextType = NameContext