reactjs - React 16.3.0 Context API 的多个嵌套消费者

Question

按照 React 16.3.0 的新上下文 API，我创建了 HOC，以便许多组件更容易使用我的上下文。

但是，如果我有多个组件消耗一个又一个嵌​​套的上下文，则 React 会抛出错误。

对于我的例子来说，我有一个要传递的 css 模块，HOC 如下所示:

import React from 'react';
import CssModuleContext from './CssModuleContext';

export default function withCssModule(Component) {
  return function CssModuleComponent(props) {
    return (
      <CssModuleContext.Consumer>
        {cx => <Component {...props} cssModule={cx} />}
      </CssModuleContext.Consumer>
    );
  };
}

然后我有两个使用此上下文的组件:

@withCssModule
export default class A extends PureComponent {
  static B = B;

  static propTypes = {
    cssModule: PropTypes.func,
  };

  render() { ... }
}

@withCssModule
export default class B extends PureComponent {
  static propTypes = {
    cssModule: PropTypes.func,
  };

  render() { ... }
}

用法如下:

render() {
  return(
    <A>
      <A.B />
    </A>
  );
}

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

这会引发错误，当我仅使用这些组件之一时，没有错误，但我无法嵌套它们。这是一个常见错误吗？有解决办法吗？或者也许我做错了什么？

CssModuleContext.js

import React from 'react';

const defaultCssModule = null; // we want to use component defined module by default

const CssModuleContext = React.createContext(defaultCssModule);

export default CssModuleContext;

CssModuleProvider.js

import React from 'react';
import PropTypes from 'prop-types';
import CssModuleContext from './CssModuleContext';

export default class CssModuleProvider extends React.Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
    cssModule: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);

    const { cssModule } = this.props;

    this.state = { cssModule };
  }

  render() {
    return (
      <CssModuleContext.Provider value={this.state.cssModule}>
        {React.Children.only(this.props.children)}
      </CssModuleContext.Provider>
    );
  }
}

Answer 1

问题是因为我正在导出 HOC 静态变量，而该对象无法访问该静态变量。

执行以下操作

@withCssModule
export default class A extends PureComponent {
  static B = B;

  static propTypes = {
    cssModule: PropTypes.func,
  };

  render() { ... }
}

然后尝试像<A.B />那样访问B将不起作用，因为我们导出包装器而不是类本身。