Javascript JSX标记内映射中的React if语句

我有以下功能来构建选项卡式项目：

function ConstructTabs(props) {
  const tabs = props.tabs;
  const makeTabs = tabs.map((tab, index) => {
    <React.Fragment>
      <input
        className="input-tabs"
        id={"tab" + index}
        type="radio"
        name="tabs"
        {index === 0 ? checked : ""}
      />
      <label for={"tab" + index}>{tab}</label>
    </React.Fragment>
  });

  return (
    <React.Fragment>
      {makeTabs}
    </React.Fragment>
  );
}

功能构造选项卡（道具）{
const tabs=props.tabs；
const makeTabs=tabs.map（（选项卡，索引）=>{
{tab}
});
返回(
{makeTabs}
);
}

我只想在索引为0时插入checked属性，我的问题是条件“{index==0？checked:”}”。下面是我得到的错误：

Parsing error: Unexpected token, expected "..."

  275 |         type="radio"
  276 |         name="tabs"
> 277 |         {index === 0 ? checked : ""}
      |          ^
  278 |       />
  279 |       <label for={"tab" + index}>{tab}</label>
  280 |     </React.Fragment>

分析错误：意外标记，应为“…”
275 | type=“无线电”
276 | name=“制表符”
>277 |{index==0？选中：“”
|          ^
278 |       />
279 |{tab}
280 |     

---

有什么方法可以修复它或者有更好的替代方法吗？

checked

没有修饰是

checked={true}

的快捷方式。要使其有时真实，有时虚假，您可以：

  name="tabs"
  checked={index===0}
/>

---

对没有

onChange

处理程序的表单字段使用

checked

prop将呈现只读字段。如果字段应该是可变的，请使用

defaultChecked

所以你可以这样做：

defaultChecked={index===0}

它给了我想要的效果（默认情况下显示第一个选项卡），但其他选项卡似乎已被禁用，因为它们不显示其内容。其他选项卡接收“checked={false}”，这使它们无法单击。