如何根据上下文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;

我得到了此警告：

警告：功能无效，作为一个反应孩子。如果您返回组件而不是从渲染中返回组件，这可能会发生。也许您打算调用此功能而不是返回。

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

Answer 1

您想将jsx从送给孩子的功能返回到 ThemeConsumer，而不仅仅是返回组件。

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

Answer 2

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

仅在单独文件中定义上下文变量，在您的情况下：

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

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

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

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

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>
    );
  }
}

我希望这会有所帮助。