如何在不调用渲染函数的情况下访问 Context 的值？ [复制]答案

【问题标题】：How can I access to the value of Context without calling the render function? [duplicate]如何在不调用渲染函数的情况下访问 Context 的值？ [复制]
【发布时间】：2019-07-10 04:04:00
【问题描述】：

所以我需要访问上下文的值而不将其作为渲染函数调用。

不是这样的：

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

我应该如何访问该值？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案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)

Context 和 HOC 在这里工作 https://codesandbox.io/s/o91vrxlywy

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

【讨论】：