如何根据Context API中的值呈现不同的组件？

Question

So I have this navigator component where depending on a value coming from another component, I need to show a different bottom navigation.

For now I am getting an error on the context consumer, here:

import { ThemeProvider, ThemeConsumer } from '../context/some';

const SelectedRoute = () => (
  <ThemeConsumer>
    {context => (context ? MainTabNavigator : PickupNavigator)}
  </ThemeConsumer>
);


export default createAppContainer(
  createSwitchNavigator(
    {
      App: SelectedRoute,
    },
  ),
);

This is the only thing I have to create context:

const ThemeContext = React.createContext(0);

export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;

I am getting this warning:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

What can I do to render what I need correctly?

Answer 1

You want to return JSX from the function given as child to ThemeConsumer , not just return a component.

const SelectedRoute = () => (
  <ThemeConsumer>
    {context => (context ? <MainTabNavigator /> : <PickupNavigator />)}
  </ThemeConsumer>
);

Answer 2

I have not run the example, but just suggesting from the docs. I thought the explanation was pretty clear but I could be wrong.

Just define a context variable in a separate file, in your case like this:

export const IndexContext = React.createContext({
    indexValue: value,
    toggleNavigator: () => {},
});

In your component(which receives indexValue), you can use the context value and toggle accordingly:

<ThemeContext.Consumer>
  {({indexValue, toggleNavigator}) => (
      // your component which uses the theme 
  )}
</ThemeContext.Consumer>

Since your component A is a stateful component, you can handle changes and update the context value there.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleIndex = () => {
        this.setState({ index });
        this.handleStateIndexChange();
        MY_CONTEXT = index;
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      index: index,
      toggleIndex: this.toggleIndex,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <IndexContext.Provider value={this.state}>
        <Content />
      </IndexContext.Provider>
    );
  }
}

I hope this helps.