React 16.3.0 Context API 的多个嵌套消费者答案

【问题标题】：Multiple nested consumers for React 16.3.0 Context APIReact 16.3.0 Context API 的多个嵌套消费者
【发布时间】：2018-04-20 13:04:37
【问题描述】：

按照 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 -- 需要一个字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从它定义的文件，或者您可能混淆了默认值和命名进口。

这会引发错误，当我只使用其中一个组件时没有错误，但我不能嵌套它们。这是一个常见的错误吗？有解决办法吗？还是我做错了什么？

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>
    );
  }
}

【问题讨论】：

A和B的渲染方法是什么样的？
它们返回简单的 div，但你可以返回 null 没关系，当你嵌套多个消费者时错误仍然存在
看起来您有多个导出默认语句，还是这些组件位于单独的文件中？
不同的文件，它们确实彼此相邻，只有当我嵌套它们时才会出现错误
@HunterMcMillen 实际上这是因为我已将 B 声明为 A 类的静态属性，请参阅更新的问题 sn-ps

标签： reactjs

【解决方案1】：

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

执行以下操作

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

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

  render() { ... }
}

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

【讨论】：