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子元素无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

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

Answer 1

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

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

Answer 2

我没有运行示例，只是从文档中提出建议。我以为解释很清楚，但我可能是错的。

只需在一个单独的文件中定义上下文变量，就像这样：

from operator import mul
from functools import partial, reduce

p = partial(reduce, mul)

list(map(p, zip(numSplit, numSplit[1:])))

[18, 72, 72]

[reduce(mul, y) for y in zip(numSplit, numSplit[1:])]

[18, 72, 72]

在您的组件（接收indexValue）中，您可以使用上下文值并相应地进行切换：

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

由于组件A是有状态的组件，因此您可以在那里处理更改并更新上下文值。

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

我希望这会有所帮助。

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

2 个答案: