在JSX标记内的地图中反应if语句

Question

I've the following function to build a tabbed items:

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

I want to insert the checked property only when the index is 0, my problem is with the condition "{index === 0 ? checked : ""}" . Here is the error I'm getting:

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>

Is there a way to fix it or have a better alternative?

Answer 1

Using a checked prop to a form field without an onChange handler will render a read-only field. If the field should be mutable use defaultChecked .

So you could do this:

defaultChecked={index===0}

Answer 2

checked with no embellishments is a shortcut for checked={true} . To make it sometimes true and sometimes false, you can do:

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