React 组件化

跨层级传递参数 解决方案 Context

本方案可以用在父组建到子组建的参数传递

实现方式及其简单分三步走：
1.创建一个Context对象
2.利用Context.Provider传递参数
3.接收参数

1.创建一个Context对象
import React from "react";
export const Context = React.createContext();


2.利用Context.Provider传递参数
<Context.Provider value={要传递的数据}>
  <ChildrenPage></ChildrenPage>
</Context.Provider>
注意这里的childrenPage要放在Provider里面
Context就是刚刚创建出来的Context的引入

3.接收参数（三种方法）

    方法一：利用关键字contextType
      static contextType = Context;
      render() {
        return <div>childrenPage {this.context}</div>;
      }
      注意这个方法只能用于Class组建
      如果function组建要用的话只能用方法二

    
    方法二：利用hook useContext
    
    import React from "react";
    import { Context } from "../Context";

    export default function ChidrenPage1() {
      const context = React.useContext(Context);
      return <div>this is ChidrenPage1{context}</div>;
    }

    把Context作为参数传递进入useContext里面也可以收到传递的参数
    
    方法三 利用Consumer
    
    可以在Class Component和Functional Component里面使用Consumer，但是注意Consumer里面接收的是一个函数
    
    
    import React from "react";
    import { Context } from "../Context";
    export default function ConsumerPage() {
      return (
        <div>
          <Context.Consumer>
            {(value) => {
              return <div>{value}</div>;
            }}
          </Context.Consumer>
        </div>
      );
    }
    
    import React, { Component } from "react";
    import { Context } from "../Context";

    export default class ConsumerPage extends Component {
      render() {
        return (
          <div>
            this is ConsumerPage
            <Context.Consumer>
              {(value) => {
                return <div>{value}</div>;
              }}
            </Context.Consumer>
          </div>
        );
      }
    }