在JSX標記內的地圖中反應if語句

Question

我有以下函數來構建選項卡式項：

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>
  );
}

property only when the index is 0, my problem is with the condition . 我想只在索引為0時插入屬性，我的問題是條件為 。 這是我得到的錯誤：

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>

有沒有辦法解決它或有更好的選擇？

Answer 1

使用已checked prop到沒有onChange處理程序的表單字段將呈現只讀字段。 如果字段應該是可變的，請使用defaultChecked 。

所以你可以這樣做：

defaultChecked={index===0}

Answer 2

沒有裝飾的checked是checked={true}的快捷方式。 為了使它有時是真的，有時是假的，你可以這樣做：

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