javascript - React 中的 HOC 是否不鼓励这样做？

Question

在组件状态中有一些数据，映射如下:

  render() {
    return (
      <div className="App">
        {this.state.items.map(item => {
            const enhancer = item.color = 'red' ? EnhancerA : EnhancerB
            const Enhanced = withEnhancement(enhancer)
            return <Enhanced {...item} />
          })}
      </div>
    )
  }

withEnhancement 是一个 HoC，它采用 EnhancerA 或 EnhancerB 并返回一个新组件。

根据 dont use hocs inside the render method 上的 React 文档，这是不好的做法吗？或者在 return 语句中这样做可以吗？

Answer 1

我想说这很糟糕，是的......但是有一个非常简单的解决方法。

将此代码放在类声明之前:

const EnhancedA = withEnhancement(EnhancerA);
const EnhancedB = withEnhancement(EnhancerB);

在渲染函数中，选择要使用的增强组件:

const Component = item.color = 'red' ? EnhancedA : EnhancedB;
return <Component {...item} />;

这样做的要点是，您只需创建一次“增强组件”，并在 map 函数中重用它们，而不是为您的 map 上的每个新元素创建一个新的组件实例。数组。