reactjs - 渲染 HOC(组件)而不更改 JSX 中的组件名称

Question

我有两个 HOC，它们向组件添加上下文，如下所示:

const withContextOne = Component => class extends React.Component {
  render() {
    return (
      <ContextOne.Consumer>
        {context => <Component {...this.props} one={context} /> }
      </ContextOne.Consumer>
    );
  }
};
export default withContextOne;

想要的结果

我只想要一种语法简洁的方法来用这个 HOC 包装一个组件，这样它就不会对我的 JSX 结构产生太大影响。

我试过的

导出带有 HOC 的组件 export default withContextOne(withContextTwo(MyComponent)) 这种方式最简洁，但不幸的是它破坏了我的单元测试。

尝试从 JSX 内部评估 HOC，例如:
{ withContextOne(withContextTwo(<Component />)) }这让我报错

Functions are not valid as a React child. This may happen if you return a Component instead of < Component /> from render.

在渲染之前创建一个变量来存储 HOC 组件:
const HOC = withContextOne(Component)

然后简单地用 <HOC {...props}/> 渲染等 我不喜欢这种方法，因为它改变了我的 JSX 中组件的名称

Answer 1

您可以设置 displayName在返回包装的组件之前。

const withContextOne = Component => {
  class WithContextOneHOC extends React.Component {
    render() {
      return (
        <ContextOne.Consumer>
          {context => <Component {...this.props} one={context} /> }
        </ContextOne.Consumer>
      );
    }
  }

  WithContextOneHOC.displayName = `WithContextOneHOC(${Component.displayName})`;

  return WithContextOneHOC;
};

这将把 <WithContextOneHOC(YourComponentHere)>在你的 React 树中，而不仅仅是通用的 React <Component>元素。