Nsryjdtyk

I am using functions which are passed down through context.

ChildComponent.contextType = SomeContext;

Now I use this.context.someFunction();. This works.

How can I do this if I need functions from two different parent components?

You can still use function-as-a-child consumer nodes with the 16.3 Context API, which is what the React documentation suggests doing:

// Theme context, default to light theme

const ThemeContext = React.createContext('light');



// Signed-in user context

const 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 contexts

function Content() {

  return (

    <ThemeContext.Consumer>

      {theme => (

        <UserContext.Consumer>

          {user => (

            <ProfilePage user={user} theme={theme} />

          )}

        </UserContext.Consumer>

      )}

    </ThemeContext.Consumer>

  );

}

To use functions in context in your component you'd typically wrap your component in a HOC so the context is passed in as props:

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)