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