无状态组件中的子组件答案

【问题标题】：Subcomponents in stateless components无状态组件中的子组件
【发布时间】：2019-04-05 15:18:54
【问题描述】：

我用谷歌搜索了很多，但找不到答案，这让我觉得很愚蠢。

在有状态的组件中，我通常把一些部分写成小函数，比如

renderSmth = () => (
    <div>
        ...
    </div>
);

然后通过在主渲染方法中调用来使用它。

至于无状态组件，当我以相同的方式编写子部分时，即

const renderSmth = () => (
    <div>
        ...
    </div>
);

eslint 给了我关于 no-multi-comp 的警告。据我了解，这样写

const smth = (
    <div>
        ...
    </div>
);

应该给出相同的结果，只是用法会略有不同——不是函数调用。

我是否理解正确，无状态组件会在每次重新渲染时重新计算？最后一种方式是否合法或有任何缺点？

【问题讨论】：

看来这是因为renderSmth正在定义一个新组件； smth 只使用现有组件；例如，它不接受props。 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… 有一些关于如何解决这个问题的详细信息，例如，使用 ignoreStateless

【解决方案1】：

不同之处在于，如果您将 smth 声明为变量而不是函数，您将无法访问 props。

如果你不需要在 smth 中使用 props，那么这就是要走的路。否则，您可以将其声明为嵌套在您的主函数中，如下所示：

renderSmth = (props) => {
  const smth = (props) => (
    <div>...</div>
  );

  return (
    <div>
      ...
      smth(props)
    </div>
  );
};

【讨论】：