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

Question

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

现在我在上下文消费者上遇到错误，这里：

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 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。

我该怎么做才能正确渲染我需要的东西？

标签： javascriptreactjsreact-nativeecmascript-6

Answer 1

你想从作为 child to 的函数返回 JSX ThemeConsumer，而不仅仅是返回一个组件。

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