React开发中能否使用展开运算符为组件设置props？

解答 #

使用展开运算符批量传递组件props是完全可行的，这是React开发中非常常用的写法，完全符合你不想单独声明每个props对应state的需求，本身没有语法或者设计上的问题。

你之前遇到的props缺失报错，是TypeScript的类型校验触发的：当TS检测到你用来展开的compProps变量可能为undefined/null，或者compProps缺少CustomComp声明的必填props字段时，就会抛出这个错误。

你自己采用的非空判断修复方案是正确的：{ compProps && <CustomComp {...compProps} /> } 保证了只有compProps为真值时才会渲染组件并传递参数，规避了类型校验风险。

如果想要进一步优化写法，可以参考两个方案：

• 如果你能保证compProps永远不会为空，可以给它绑定和CustomCompprops对齐的类型声明，不需要额外加判断就能通过TS校验：

// 先声明组件的props类型
type CustomCompProps = {
  label: string
  value: string
  icon: string
  // 其他组件需要的字段
}

// 给compProps指定对应类型
const compProps: CustomCompProps = { 
    label: 'Test Label',
    value: 'Test Value',
    icon: 'test-icon'
}

// 直接传递即可，不会报错
<CustomComp {...compProps} />

• 如果compProps确实存在为空的可能，也可以用空值合并语法兜底，避免组件不渲染的情况：

<CustomComp {...(compProps ?? {})} />

注意这种写法需要你提前给CustomComp的所有必填props设置默认值，避免出现实际传值为空的问题。

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