React单选框三元运算符报错：TS1005期望'...'问题求助

你遇到的问题是因为在JSX中错误处理了checked布尔属性，直接看解决方案：

错误原因 #

你用模板字符串拼接的方式设置checked属性：

{`${studio.studioType === item.value ? "checked" : ""}`}

这种写法不符合JSX的属性规则：

1. React的布尔属性（比如checked、disabled）需要接收布尔值（true/false），而不是字符串；
2. 直接插入模板字符串相当于在属性位置放了一个无键的表达式，TS会判定语法错误，提示需要属性键值对的格式。

正确写法 #

直接将条件表达式作为checked属性的值，因为条件本身返回的就是布尔值：

<div className="flex items-center pl-3">
  <label className="w-full py-3 ml-2 text-sm font-medium text-gray-900 ">
    <input
      id={item.id}
      type={item.type}
      value={item.value}
      name={item.name}
      required
      checked={studio.studioType === item.value}
      className="w-4 h-4 text-orange-400 bg-gray-100 border-gray-300 rounded focus:ring-orange-400 focus:ring-2"
    />
    <span className="ml-2">{item.title}</span>
  </label>
</div>

补充说明 #

如果场景需要更复杂的判断，也可以用三元运算符明确返回布尔值：

checked={studio.studioType === item.value ? true : false}

不过上面的条件表达式已经足够简洁，没必要多此一举。

这样修改后，TS的报错会消失，同时radio组件也能正确根据studio.studioType的值设置选中状态。

内容的提问来源于stack exchange，提问作者Coolkid