組件跨層級(jí)通信 - Context

• 上下文提供一種不需要每層設(shè)置props就能跨多級(jí)組件傳遞數(shù)據(jù)的方式

方式1

• Provider提供值
• Consumer來(lái)消費(fèi)傳遞的值

import React from 'react';// 創(chuàng)建一個(gè)上下文 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的孩子展開(kāi){value => <Child {...child} />}</Consumer></Provider></div>) }

方式2

• 使用hook來(lái)消費(fèi)(useContext)

import React, {useContext} from 'react'; const { Provider } = MyContext;const MyContext = React.createContext();// 使用hook消費(fèi) function Child2() {// 使用useContext來(lái)獲取傳遞過(guò)來(lái)的參數(shù),放在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指定靜態(tài)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>) }

總結(jié)

以上是生活随笔為你收集整理的react --- 隔代传递参数的三种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。