关于 disabled 属性的一个不起眼但又容易引起迷惑的问题

来源：4-8 小试牛刀 - Button 组件编码第一部分

Neolu4ever

2022-11-17

在 mdn 网站上描述 disabled 是一个 boolean属性，老师在课程中定义 interface 接口也是如此。于是我会直觉上认为，我要是在标签上启用 disabled 就必须这样传值：disabled = { true }。

然而日常使用中我基本上本能就写上<button disbaled></button>，没有觉得有任何问题，这时我细想了一下就觉得奇怪了。

我去查了一下，事实上 disabled 可以传入若干任意字符串来启用它，比如：

disabled = “yes”
disabled = “123”
disabled = “ ” 等等

唯独是不能传入 “false”，这个会禁用它，让按钮处于可以交互的状态。

我的疑问是：在我们自定义的组件 Button 上直接写 <Button disabled></Button>，是不是其实就是 <Button disabled={true}></Button>的简写呢，我试过直接写 disabled = “disabled”/“true” 的话 ts 会报类型错误（string 赋值给 boolean），写 disabled = { true } 反倒是没问题。

写回答

1回答