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

因此，我有这个导航器组件，根据另一个组件的值，我需要显示一个不同的底部导航。

现在，我在上下文使用者上遇到了一个错误，在这里：

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

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


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

这是我创建上下文的唯一步骤：

const ThemeContext = React.createContext(0);

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

我收到此警告：


  警告：函数作为React子元素无效。如果您返回Component而不是从render返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。


我该怎么做才能正确呈现我的需求？

最佳答案

您想将JSX从作为子级给定的函数返回给ThemeConsumer，而不仅仅是返回一个组件。

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

关于javascript - 如何根据Context API中的值呈现不同的组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54717797/