Question

因此，我需要访问context的值而不将其作为渲染函数调用。

不喜欢这样：

const Child = () => {
  return (
    <ThemeConsumer>
      {context => {return <Text>{context}</Text>}}
    </ThemeConsumer>
  );
};

到目前为止，我已经拥有了：

import React from 'react';
export const ThemeContext = React.createContext(0);
export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;

我正在使用这样的提供程序：

  render() {
    const { index } = this.state;
    return (
      <ThemeProvider value={index}>
        <TabView
          key={Math.random()}
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this.renderTabBar}
          onIndexChange={this.handleIndexChange}
        />
      </ThemeProvider>
    );
  }

可以吗？

到目前为止，我主要遇到的问题是，我需要该值的地方不是类也不是功能组件。

我需要做这样的事情：

import { ThemeConsumer } from '../../context/BottomNavigationTheme';
import HomeScreen from '../screens/HomeScreen';
import HomeScreen2 from '../screens/HomeScreen2';

functionToGetContextValue = () => valueFromContext;

const HomeStack = createStackNavigator({
  Home: functionToGetContextValue ? HomeScreen : HomeScreen2, // HERE I NEED IT
});

HomeStack.navigationOptions = {
  tabBarLabel: 'All Passengers',
  tabBarIcon: ({ focused }) => <AllPassengersIcon focused={focused} />,
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

我应该怎么做才能获取该值？

Answer 1

您可以使用HOC。创建一个函数withTheme

export const withTheme = Component => props => (
  <ThemeConsumer>
    {context => <Component {...props} them={context} />
  </ThemeConsumer>
)

然后在所需的任何子组件中使用。

class TabView extends React.PureComponent {
  componentDidMount() {
    console.log(this.props.theme)
  }
  ...
}

export default withTheme(TabView)

https://codesandbox.io/s/o91vrxlywy在这里Context与HOC一起工作

如果您使用React钩子（16.8版），则可以使用useContext API https://reactjs.org/docs/hooks-reference.html#usecontext

如何在不调用render函数的情况下访问Context的值？

1 个答案: