在JSX标记内的map中对if语句进行反应

时间:2019-04-28 22:47:02

标签: javascript html reactjs

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

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

我只想在索引为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>

是否可以解决它或有更好的选择?

2 个答案:

答案 0 :(得分:2)

在没有checked处理程序的表单字段上使用onChange道具将呈现一个只读字段。如果该字段是可变字段,请使用defaultChecked

所以您可以这样做:

defaultChecked={index===0}

答案 1 :(得分:1)

checked(不带修饰)是checked={true}的快捷方式。要使它有时真或假,可以做到:

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