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

Posted 2023-04-14

【中文标题】如何在不调用渲染函数的情况下访问 Context 的值？ [复制]

【英文标题】：How can I access to the value of Context without calling the render function? [duplicate]

【发布时间】：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,
);

我应该如何访问该值？

【参考方案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