context组件跨层级通信-ContextContextAPIReact.createContext Context.

组件跨层级通信 - Context

Context API

React.createContext

Context.Provider

Class.contextType

Context.Consumer

useContext hook函数组件

```js

Context.js

export const ThemeContext = React.createContext({themeColor: "pink"});

export const ThemeProvider = ThemeContext.Provider;

export const ThemeConsumer = ThemeContext.Consumer;

<ThemeProvider value={theme}>

1。<ConsumerPage />

2。<ContextTypePage />

3。<UseContextPage />

</ThemeProvider>

import {ThemeContext} from "../Context";

1。//ConsumerPage：

2.static contextType = ThemeContext;

3.const {themeColor} = useContext(ThemeContext);

return ( <div className="border">

<h3 className={themeColor}>UseContextPage</h3>

</div> );}