React 上下文提供者和消费者

Question

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？

Answer 1

Provider parent 和 Consumer 后代之间的关系允许在它们之间共享值。

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

两者都有自己的 ThemeContext？

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