建立网站后台,带产品列表 wordpress,免费ppt模板大全网址,京东seo是什么意思组件跨层级通信 - Context
上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式
方式1
Provider提供值Consumer来消费传递的值
import React from react;// 创建一个上下文
const Mycontext React.createContext();
const { Provider, Consumer } MyContext;…组件跨层级通信 - Context
上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式
方式1
Provider提供值Consumer来消费传递的值
import React from react;// 创建一个上下文
const Mycontext React.createContext();
const { Provider, Consumer } MyContext;function Child(prop) {return divChild: {prop.foo} /div
}export default function ContextTest() {return (divProvider 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 divChild2: {ctx.foo} /div
}export default function ContextTest() {return (divProvider 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 divChild3: {this.context.foo}/div}
}export default function ContextTest() {return (divProvider value{{foo: bar}}Child3/Child3/Provider/div)
}
