reactjs - React 函数式组件中的参数而不是 Props

Question

这个功能是正确的 React 功能组件吗？或者我为什么要使用 props 对象？

function StyledLabel(value, cssClass){
   return <span className={cssClass}>{value}</span>
}

我看到的唯一区别是调用此函数:

<App>
   {StyledLabel(value, cssClass)}
</App>

Answer 1

function StyledLabel(value, cssClass){
   return <span className={cssClass}>{value}</span>
}

像这样使用

{StyledLabel(value, cssClass)}

不是传统的函数式组件，而是返回 JSX 的函数。

如果您遵循这样的语法，您将无法利用功能组件的某些功能，例如使用 React.memo。

尽管您仍然可以在功能组件中使用钩子(Hook)。

使用这种语法的另一个缺点是您不能像使用以下语法那样轻松地将子组件添加到 StyledLabel

<StyledLabel>
    <SomeChild/>
</StyledLabel>

尽管 React 在内部也通过调用它来调用该函数，而 JSX 渲染器只是一个使用 React.createElement 来转换它的 Syntactic Sugar，但它为您提供了一个使组件成为虚拟 DOM 的一部分而不是其返回值成为虚拟 dom 的一部分的方法