React defaultProps和内联道具之间的区别

Question

这些之间的功能差异是什么（如果有的话）？在这两种情况下，传播道具都会覆盖预设道具。有什么理由可以使用一种语法而不是另一种语法？

1。默认道具

const Input = (props) => (
  <input {...props} />
);

Input.defaultProps = {
  className: "input",
};

2。内联道具

const Input = (props) => (
  <input className="input" {...props} />
);

Answer 1

当您的组件需要某些道具来操作时，您可以使用defaultProps，但您不确定是否会在任何时候都使用它。所以你提供了一个默认值。如果您的实际道具不存在，则会设置此项。

您的spread运算符展开（或传播）给定对象。每个键值对作为prop传递给组件。如果你不确定你的子组件需要的道具，你会使用它。所以只需将它展开，让孩子使用它所需要的东西。 （这只是一次情景）

在您的问题中，您已经提到spread运算符会覆盖两种情况下的当前道具。最重要的行为是因为扩展运算符的位置而不是因为使用defaultProps或不存在相同的行为。

所以我们假设下面的代码。在此，input会在myClass中获得className作为道具。因为您在props之后传播了className。

const props = {
 className: 'myClass',
};

<input className="input" {...props} />

在下面的代码中，input会在input中获得className作为道具。

const props = {
 className: 'myClass',
};

<input {...props} className="input" />