React 函数组件中如何判断指定 prop 是否被主动传入

未设置prop默认值的场景 #

如果你的组件没有给目标prop设置默认值，直接判断该prop是否不等于undefined即可：

function Song(props) {
  // 判断是否传入genre
  const isGenreProvided = props.genre !== undefined;

  // 调用 <Song /> 时输出 false，调用 <Song genre="Rap" /> 时输出 true
  // 即使用户显式传入 <Song genre={undefined} /> 也会输出 false，符合预期
  console.log(isGenreProvided);

  return <div>歌曲组件</div>
}

如果用了解构赋值的写法，也可以按如下方式实现：

function Song({ genre }) {
  const isGenreProvided = genre !== undefined;
  // 后续业务逻辑
}

已设置prop默认值的场景 #

如果你的组件给目标prop设置了默认值，直接判断prop值就会失效，此时可以通过判断传入的props对象是否存在对应属性键来实现：

// 给genre设置了默认值Pop
function Song({ genre = "Pop" }) {
  // *优先用Object.hasOwn判断，避免原型链属性干扰*
  const isGenreProvided = Object.hasOwn(arguments[0], 'genre');

  // 调用 <Song /> 输出 false，调用 <Song genre="Rap" /> 输出 true
  // 用户显式传入 <Song genre={undefined} /> 也会判定为已传入，符合React传参规则
  console.log(isGenreProvided);

  return <div>歌曲组件</div>
}

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