React函数组件用参数替代Props？该函数是否合规？为何用props对象？

首先得明确：你写的这个function StyledLabel(value, cssClass)并不是标准的React函数组件，它只是一个返回JSX的普通JavaScript函数而已。

为什么它不是标准组件？ #

React对函数组件的定义有明确的约定：函数组件的第一个参数必须是一个包含所有传入属性的props对象，而不是分散的单个参数。当你用JSX标签（比如<StyledLabel />）渲染组件时，React会自动把你传入的所有属性（比如value="xxx"、cssClass="yyy"）打包成一个对象传递给组件函数——而你的写法完全跳过了这个机制，只能像普通函数那样直接调用StyledLabel(value, cssClass)，没办法享受React组件的特性。

为什么一定要用props对象？ #

这里有几个核心原因：

• 遵循React的设计规范：整个React生态都是基于props对象传递组件数据的，统一的写法能让团队协作更顺畅，也符合社区的通用认知。
• 扩展性拉满：如果后续要给组件加新属性（比如disabled状态、onClick事件），用props对象的话，你只需要在解构里新增属性或者直接用props.disabled就行，不用修改函数的参数列表，也不用改动所有调用的地方。要是用单个参数，每次加属性都得改函数定义和所有调用，简直是维护噩梦。
• 支持组件嵌套（children）：props对象默认包含children属性，这是React实现组件嵌套内容的核心方式——比如你想给<StyledLabel>里面加个图标或者文本，用props的话直接写<StyledLabel>...</StyledLabel>就能拿到子元素，单个参数的写法根本做不到这一点。
• 兼容React的高级特性：标准组件可以用React.memo做性能优化，也能正常使用Hooks（比如useState、useEffect），但普通函数调用的方式完全享受不到这些能力。

正确的写法参考 #

如果想把它改成标准的React函数组件，可以用解构props的方式（最常用）：

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

// 调用方式（标准JSX写法）：
<StyledLabel value="姓名" cssClass="form-label">
  <span className="required">*</span>
</StyledLabel>

或者直接使用完整的props对象：

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

内容的提问来源于stack exchange，提问作者ytkopobot