反应无线电输入三元运算符不起作用

Question

我正在尝试在无线电输入上设置三元运算符。我有几个输入，所以我使用一个数组来放置所有输入。我这样做是为了在它从数据库到达时就可以对其进行设置。

<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
                      {`${studio.studioType === item.value ? "checked" : ""}`}
                      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>

这是我得到的错误： 当我将鼠标悬停时，它会显示：

'...'预期.ts(1005)

Answer 1

用

{...}

包围整个属性来表示计算值不是有效的 JSX 语法 - 您只能使用属性 value 来做到这一点。

您可以做的是使用对象扩展语法，来扩展一个有条件为空或包含您需要的属性的对象。像这样：

<input
  id={item.id}
  type={item.type}
  value={item.value}
  name={item.name}
  required
  {...(studio.studioType === item.value ? { checked: true } : {})}
  className="w-4 h-4 text-orange-400 bg-gray-100 border-gray-300 rounded focus:ring-orange-400 focus:ring-2"
/>