Question

我一直很难理解，我应该何时使用.isRequred vs .defaultProps={...} 我的想法是，我认为我永远不应该真的需要使用isRequired，因为它似乎手动创建了一个可以在应用程序中断的bug，因为create isRequired会自动删除添加相应默认prop的需要，这让我感到不舒服因为这意味着我无法期待一个故障安全值。

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

Answer 1

使用prop类型是记录组件API的好方法，这样其他人就可以在不阅读代码的情况下知道它是如何工作的。

它通常认为的方式是，如果提供了所有必需的道具，则保证组件无错误地呈现。不需要的道具只会增强具有附加功能的组件。

考虑这个例子

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"
};

在React Application中，应该使用什么样的场景是PropType和defaultProps

1 个答案: