React 上下文提供者和消费者

Question

主题上下文.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 呢？

Answer 1

Provider父母和后代之间的关系允许Consumer他们分享价值观。

<ThemeContext.Consumer>in Chas<ThemeContext.Provider value={'green'}>作为父级，因此它能够访问green上下文值作为coloredTheme回调参数。

两者都有自己的 ThemeContext？

ES 模块被评估一次并产生单例。ThemeContext是上下文对象。A和模块中的情况相同C。