javascript - 在React Application中PropType与defaultProps应该使用哪种场景

我一直在努力理解，到底应该何时使用.isRequred和.defaultProps={...}我的想法是，我认为我永远都不应该真正需要使用isRequired，因为手动创建似乎可以在应用程序中中断的错误是因为create isRequired自动删除了添加相应默认属性的需要，这让我感到不舒服因为这意味着我将无法期望故障安全值。

这肯定听起来是一个基于意见的问题，但我正在寻找更好的意见，如果有的话，它会更有意义。

最佳答案

使用prop类型是记录组件API的好方法，以便其他人无需阅读代码即可知道其工作方式。

通常会想到的方式是，如果提供了所有必需的 Prop ，则可以保证组件呈现无错误。不需要的 Prop 只会通过附加功能增强组件。

考虑这个例子

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      {avatarUrl && <img src={avatarUrl} />}
    </div>
  );
}

UserCard.propTypes = {
  name: string.isRequired,
  avatarUrl: string
};

现在，如果要渲染未提供的默认配置文件图片，则可以删除组件内部的条件检查，而提供默认值。

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      <img src={avatarUrl} />
    </div>
  );
}

UserCard.propTypes = {
  name: string.isRequired,
  avatarUrl: string
};

UserCard.defaultProps = {
  avatarUrl: "/assets/generic-picture.png"
};