美文网首页
React中 Context组件传参的方法

React中 Context组件传参的方法

作者: 牛奶大泡芙 | 来源:发表于2020-07-11 19:40 被阅读0次

React组件间通信用的最多的是props,让子组件接受父组件的数据,或者通过调用父组件的函数以更改父组件的数据,这样是比较方便。
但是我们还考虑到祖孙关系组件通信,props传递不太现实而且中间的组件完全没有意义。
你可能会说了,不是有redux可以做一个全局的状态管理吗?把这个数据直接写进store里面通过最顶层组件向下派发不可以吗?
答案是不一定,使用store存储数据和触发渲染一般要考虑两点,第一,是否是多组件共享数据,第二,是数据卸载后再次挂载,还需要保留之前的状态或者数据吗?如果这两点好像也不满足,那就乖乖选择context吧
实现方式:
1、 React17中即将被废弃,

getChildContext(){
    return{xx:vv}
}

return的这个对象在子组件中能被获取,但是必须要声明 childContextType ,
在父组件之外需要规定被向下传递的参数的类型,

Parent.childContextTypes={
    xx:PropTypes.string
}

Parent是提供context数据组件的名称
还有
需要在接受参数的子组件之外相应的声明参数的类型,

Child.contextTypes={
    xx:PropTypes.string
} 

Child是接受context数据的组件的名称
要想使用context的话,这两个type必须都设置并且具有正确的对应关系
2、 React16提供的createContext

Const { Provider, Consumer } = React.createContext(‘default’)

相关文章

  • React中 Context组件传参的方法

    React组件间通信用的最多的是props,让子组件接受父组件的数据,或者通过调用父组件的函数以更改父组件的数据,...

  • react组件传递参数

    基本传参props 传递数据 在子组件中 传方法 在子组件使用 context 上下文传递参数 特点 引入的con...

  • react 组件之间通讯传值的多种方法实现

    react组件传值,大概有下面几种方法: props context redux react-router 路由切...

  • react传参

    react传参 基本传参 props在子组件中this.p...

  • React组件

    方法一(不传参): 创建组件: var HelloMessage = React.createClass({ r...

  • 2020-05-08

    #react中组件中的传参 1、父传子通过属性传递 2、子传父,需要父先给子传个方法过去,方法里面包含需要子传入的...

  • 父子传参

    在react中父子组件传参一 、父传子 子组件把值传给父组件在父组件中 其实可以把子组件里的方法用箭头函数,这样就...

  • 父子组件传值的方式

    父组件传值给子组件方式1、props2、context(高级用法)React的上下文-Context3、组件组合(...

  • 使用ts搭建一个react class组件

    在父组件中给子组件传参在父组件中引入子组件,然后直接传入参数,子组件通过React.Component ,它里面的...

  • react 事件绑定和传参

    使用react,绕不开事件绑定和传参,react事件绑定的方法有以下几种。 方法一: 传参:onClick={th...

网友评论

      本文标题:React中 Context组件传参的方法

      本文链接:https://www.haomeiwen.com/subject/cfoicktx.html