組件跨層級通信 - 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>)
}