组件跨层级通信 - Context

上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式

方式1

Provider提供值
Consumer来消费传递的值

import React from 'react';// 创建一个上下文
const Mycontext = React.createContext();
const { Provider, Consumer } = MyContext;function Child(prop) {return <div>Child: {prop.foo} </div>
}export default function ContextTest() {return (<div><Provider value ={ {foo: 'bar'} }><Consumer>// 将value的孩子展开{value => <Child {...child} />}</Consumer></Provider></div>)
}

方式2

使用hook来消费(useContext)

import React, {useContext} from 'react';
const { Provider } = MyContext;const MyContext = React.createContext();// 使用hook消费
function Child2() {// 使用useContext来获取传递过来的参数,放在ctx里面const ctx = useContext(MyContext);return <div>Child2: {ctx.foo} </div>
}export default function ContextTest() {return (<div><Provider value={{foo: 'bar'}}><Child2></Child2></Provider></div>)
}

方式3

使用class指定静态contextType

import React from 'react'
const MyContext = React.createContext();class Child3 extends React.Component{static contextType = MyContext;render(){return <div>Child3: {this.context.foo}</div>}
}export default function ContextTest() {return (<div><Provider value={{foo: 'bar'}}><Child3></Child3></Provider></div>)
}

react --- 隔代传递参数的三种方式相关推荐

Mybatis传递参数的三种方式
第一种: Dao层使用@Param注解的方法 VersionBox getVersionByVersionNumAndVersionType(@Param("versionNum" ...
mybatis 传递参数的三种方式
mybatis 框架的主要工作是数据层, 侧重于与数据库打交道的sql语句的编写,对sql也要求比较熟练. mybatis 传递参数的方式主要有三种: 1. 多个参数的传递方式形式如: ...
向函数传递结构的三种方式
向函数传递结构的三种方式零.写在前面在程序设计的过程当中,我们经常会涉及到选择数据的类型,在很多情况下,单单是普通的变量和数组并不足以满足我们的需求,这时候,C语言为我们提供了一种计较好用的数据类 ...
表单提交和超链接请求传递参数的几种方式
表单提交和超链接请求传递参数的几种方式这段时间在使用easy-ui的datagrid,他有自己提交表单的方式,所以就整理整理页面对参数的提交方式: 注:下面代码都已经过测试. 1. HTML提交表单 ...
命令行运行Python脚本时传入参数的三种方式
三种常用的方式如果在运行python脚本时需要传入一些参数,例如gpus与batch_size,可以使用如下三种方式. python script.py 0,1,2 10 python script ...
vue-router 传递参数的几种方式
本文转载自:https://blog.csdn.net/crazywoniu/article/details/80942642 vue-router传递参数分为两大类编程式的导航 router.pu ...
[转]Delphi过程函数传递参数的几种方式
在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out.另一种不加修饰符的为默认按值传递参数. 一.默认方式以值方式传递参数 procedure TForm1.ProcNormal( ...
Flink获取外部传递参数的两种方式
目录一.前言二.实现 2.1 通过参数方式直接传递 2.2 通过配置文件来获取参数值一.前言在Flink中,我们会对接Kafka,Kafka的参数比较多,如果我们希望通过灵活的方式修改参数,而 ...
JSP中页面向Action传递参数的几种方式
转自:http://zhidao.baidu.com/link?url=kEOyifTghb--LvcQVpkh-kkpgZIcYU-dlqQyNM5e3b_9fywiDQGVxAOHVedJkqGA ...

react --- 隔代传递参数的三种方式

组件跨层级通信 - Context

方式1

方式2

方式3

react --- 隔代传递参数的三种方式相关推荐

最新文章

热门文章