时间戳

首页 > 解决方案 > 在 JSX 标签内的 map 中反应 if 语句

javascript - 在 JSX 标签内的 map 中反应 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>
  );
}

我只想在索引为 0 时插入选中的属性，我的问题是条件"{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>

有没有办法解决它或有更好的选择？

标签： javascripthtmlreactjs

解决方案

在没有处理程序的情况下对表单字段使用checked道具onChange将呈现只读字段。如果该字段应该是可变的，请使用defaultChecked.

所以你可以这样做：

defaultChecked={index===0}

推荐阅读