在使用带有React的antd时，避免过多嵌套组件的最佳方法是什么？

Question

看起来antd（https://ant.design）正在产生惊人数量的嵌套以实现其目的。也许我错了，但我觉得必须有一个更好的方法。

例如，我添加了彩色文本，如下所示：

<Text type="danger">Some words</Text>

在DOM，它看起来像预期的那样：

<span class="ant-typography ant-typography-danger">Some words</span>

但是当使用react-tools进行检查时，它看起来很臃肿并加倍：

（“...>”=省略属性）

<Text type="danger">
  <withConfigConsumer(Base)  ...>
    <Context.consumer>
      <Base ...>
        <LocalReceiver  ...>
          <ReactResizeObserver ...>
            <Typography ...>
              <Content.consumer>
                <span ...>
                  "Some words"
...

</Text>
<Context.consumer>
  <Base ...>
    <LocalReceiver  ...>
      <ReactResizeObserver ...>
        <Typography ...>
          <Content.consumer>
            <span ...>
              "Some words"
...

</Context.consumer>

诚然，我对React没有足够的经验。但这不是过度的吗？为什么加倍？最重要的是：我怎样才能使用antd并避免这种情况？

Answer 1

使用antd时无法避免这种情况，因为这是他们团队决定使用的React设计模式。这些包装器组件是HOC - higher-order components，它们的目的是在子组件上应用/重用某些逻辑。

例如，在他们的GitHub repo中，您可以清楚地看到Text，Title和Paragraph是相同的Typography组件，其内部文本获取styled differently，具体取决于它是否传递了Text，Title或Paragraph prop。这是为了确保可扩展性：如果他们决定创建一个Quote组件，他们只需在Typography组件中添加一个Quote条目，并定义可能包含斜体文本的Quote样式。然后，包装器Typography组件将这个新的斜体样式传递给它的子组件 - 内部文本。

对于ReactResizeObserver，许多Ant设计组件需要将某种onResize事件侦听器附加到自身以便响应 - 根据屏幕宽度更改其大小或结构。他们没有在需要此功能的每个组件上定义相同的onResize侦听器和处理程序，而是创建了一个可以将任何组件包装在内并允许其响应的单个HOC。

你真的不应该关心这个，因为这是许多流行的库，如React Router或Redux的常见做法。