React中判断props是否存在、是否有有效值的更优实现方式是什么？

你目前的写法存在两个隐患：

1. 如果组件使用者传入合法的假值0/false作为delay参数，虽然能正常取到值，但如果useStyle不允许delay为假值时会出现异常
2. 未传入delay时，delay: props.delay && props.delay等价于delay: undefined，相当于你还是给配置对象传入了值为undefined的delay属性，依然有概率触发useStyle的参数校验报错。

推荐实现方案 #

• 方案1：动态属性注入（最贴合需求）
  通过对象展开+条件判断，仅当delay属性确实存在于props中时，才把delay配置加入参数对象，完全避免传递不存在的prop：

const bgStyle = useStyle({
  to: {backgroundColor: 'red', ...props.containerStyle},
  // 仅props包含delay属性时才注入该配置
  ...(Object.prototype.hasOwnProperty.call(props, 'delay') && { delay: props.delay })
});

如果你的props是普通组件参数，没有继承额外的原型属性，也可以简写为props.hasOwnProperty('delay')。这种写法不管传入的delay是真值还是假值，只要使用者传了就会正常生效，没传的话配置对象里不会出现delay字段，不会触发报错。

• 方案2：显式判断赋值（可读性最高）
  如果有多个可选prop需要处理，拆分配置对象的构造逻辑更便于后续维护：

const styleParams = {
  to: {backgroundColor: 'red', ...props.containerStyle}
}
// 仅当delay不为undefined时追加配置
if (props.delay !== undefined) {
  styleParams.delay = props.delay
}
const bgStyle = useStyle(styleParams)

如果你的组件props已经做了默认值处理，只需要判断是否是初始的undefined状态即可，不需要额外调用hasOwnProperty。

如果你的项目支持ES2020+语法，也可以把判断条件简化为delay: props.delay ?? undefined，不过注意这种写法依然会把delay字段写入配置对象，仅适合useStyle允许传入undefined值、会自动忽略无效字段的场景。

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