javascript - react 上下文提供者和使用者

ThemeContext.js

import React from 'react';

const ThemeContext = React.createContext(null);

export default ThemeContext;

父组件

import ThemeContext from './ThemeContext';

class A extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value={'green'}>
        <D />
      </ThemeContext.Provider>
    );
  }
}

组件C在组件D之下。

import ThemeContext from './ThemeContext';

class C extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {coloredTheme =>
          <div style={{ color: coloredTheme }}>
            Hello World
          </div>
        }
      </ThemeContext.Consumer>
    );
  }
}

让我感到困惑的是，我们正在从提供者(组件A)和使用者(组件C)中导入“ThemeContext.js”。那么这两个组件如何共享一个ThemeContext实例(消费者如何在不共享一个上下文的情况下访问提供者上下文)，它们却都有自己的ThemeContext？

最佳答案

Provider父代与Consumer后代之间的关系允许它们之间共享值。
<ThemeContext.Consumer>中的C以<ThemeContext.Provider value={'green'}>作为父级，因此它可以将green上下文值作为coloredTheme回调参数来访问。



ES模块只评估一次，并导致单例。 ThemeContext是上下文对象。在A和C模块中相同。