react 跨组件传值方式 context上下文 redux (白话总结)

跨组件传值方式

方式一:context上下文

使用步骤:
    1.创建文件夹context,里面创建index.js写一个组件

    2.创建上下文对象以及(对象的方式创建)他的生产者和消费者
            2-1.引进去上下文对象createContext
            2-2.创建上下文对象

  let context=createContext()

            2-3.创建生产者和消费者   

  let {Provider,Consumer}=context;

          2-4.this.props.children 表示所有的子元素
                组件里写{this.props.children}
          2-5暴露出去

export {Index,Consumer}

    3.我们需要传递数据  那么就把当前这个上下文对象的组件变成所有组件的老大
    在整体的index.js中设置  
            3-1.引用并且解构出上下文对象的组件

 import {Index} from "./context/index.js"

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐