反应上下文提供者和消费者

Question

ThemeContext.js

import React from 'react';

const ThemeContext = React.createContext(null);

export default ThemeContext;

Parent component

import ThemeContext from './ThemeContext';

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

Component C is below component D.

import ThemeContext from './ThemeContext';

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

What makes me vague is that we are importing "ThemeContext.js" from the provider(component A) and the consumer(component C). So how could the two components share a single ThemeContext instance( how does the consumer access the providers context without sharing a single one) , both have their own ThemeContext?

Answer 1

It is the relationship between Provider parent and Consumer descendants that allows to share values between them.

<ThemeContext.Consumer> in C has <ThemeContext.Provider value={'green'}> as parent, so it's able to access green context value as coloredTheme callback parameter.

both have their own ThemeContext?

ES modules are evaluated once and result in singletons. ThemeContext is context object. It is same in A and C modules.