反应多个上下文

您仍然可以通过16.3 Context
API来使用子级功能消费者节点，这是React文档建议的做法：

// Theme context, default to light themeconst ThemeContext = React.createContext('light');// Signed-in user contextconst UserContext = React.createContext({  name: 'Guest',});class App extends React.Component {  render() {    const {signedInUser, theme} = this.props;    // App component that provides initial context values    return (      <ThemeContext.Provider value={theme}>        <UserContext.Provider value={signedInUser}>          <Layout />        </UserContext.Provider>      </ThemeContext.Provider>    );  }}function Layout() {  return (    <div>      <Sidebar />      <Content />    </div>  );}// A component may consume multiple contextsfunction Content() {  return (    <ThemeContext.Consumer>      {theme => (        <UserContext.Consumer>          {user => ( <ProfilePage user={user} theme={theme} />          )}        </UserContext.Consumer>      )}    </ThemeContext.Consumer>  );}

要在组件的上下文中使用函数，通常将组件包装在HOC中，以便将上下文作为prop传递：

export const withThemeContext = Component => (  props => (    <ThemeContext.Consumer>      {context => <Component themeContext={context} {...props} />}    </ThemeContext.Consumer>  ))const YourComponent = ({ themeContext, ...props }) => {  themeContext.someFunction()  return (<div>Hi Mom!</div>)}export default withThemeContext(YourComponent)

如果您正在运行React 16.8+，则还可以使用钩子更干净地执行此操作，而无需使用HOC：

import React, { useContext } from "react"const YourComponent = props => {  const theme = useContext(ThemeContext)  const user = useContext(UserContext)}

或者，如果您大量使用这些上下文，则可以制作一个自定义钩子以进一步简化操作：

const useTheme = () => useContext(ThemeContext)const useUser = () => useContext(UserContext)const YourComponent = props => {  const theme = useTheme()  const user = useUser()}