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

像被使用

{StyledLabel(value, cssClass)}

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

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

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

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

<StyledLabel>
    <SomeChild/>
</StyledLabel>

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

函数组件是一个返回JSX元素的函数。

这是一个作为普通函数调用的函数组件。

但在这种情况下， is 没有被调用React.createElement。

因为 JSX 是 的语法糖，React.createElement所以您需要使用 JSX 语法调用函数，如下所示：

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

<App>
  <StyledLabel value={value} cssClass={cssClass} />
</App>

如果不调用React.createElement，React 将不会知道组件（用于状态更新、差异算法等），因为它只是一个普通的函数调用。

另一个主要问题是函数参数：

// Not function StyledLabel(value, cssClass)
function StyledLabel(props)

React.createElement接受一个参数，即组件的props。

• React.createElementAPI

React.createElement(
  type,
  [props],
  [...children]
)