Reactjs 传递spread道具和html样式属性时的类型差异 总结：

Typescript在通过标准

propName={propValue}

传递道具时出错，但在使用排列道具

{…{propName:propValue}}

澄清一下：我知道如何解决这个问题。我可以将它显式地添加到

IconButtonProps

类型中；我还可以添加

&React.HTMLAttributes

，这样我就不必迭代我想要通过的所有按钮道具；我也可以在任何地方使用传播道具（不管怎样，我90%的时间都是这样做的）

然而，这两个组件似乎应该是相同的我想了解为什么这两种据说相当的传递道具的方式在typescript中表现不同。

代码示例

---

componentwithpreadrops

没有错误

我认为问题在于IconButtonProps类型中缺少“onClick”

我只是编辑到：

type IconButtonProps = { className?: string; "aria-label": string; onClick: () => void };

错误消失了

问候

这是因为typescript的性质。您可以在提供的链接中阅读更多内容

当你传播一个对象时，你并不知道它的属性，或者如果它有多余的属性，因为有些对象的属性是继承的。Typescript不会捕获扩展对象上任何其他属性的错误

范例

var x = { d: 0 };
var y: { a: number, b: string } = {
    a: 0,
    b: "",
    ...x,
    d: 100
};

---

当您尝试在

y

中分配

d

时，Typescripts将引发错误，但将允许

x

的传播感谢您的响应！我应该补充一点，我知道我可以将道具添加到类型中，但我不明白为什么这两个组件的响应行为应该不同！我知道typescript使用结构类型，但是我不明白为什么这两种假定相等的传递道具的方式会以不同的方式结束types@augzodia我修改了我的ans，对问题进行了更多的描述，这就是typescript允许其他属性进行扩展的原因。编辑非常有用！我回去玩了这个例子，发现我可以输入一个签名错误的

onClick

，打字脚本也不在乎这个。谢谢

type IconButtonProps = { className?: string; "aria-label": string; onClick: () => void };

var x = { d: 0 };
var y: { a: number, b: string } = {
    a: 0,
    b: "",
    ...x,
    d: 100
};