reactjs - 需要在 JSX 中设置条件的帮助

Question

我正在迭代一段 JSX 代码，该代码从 json 文件获取数据，并显示到 DOM。我需要将样式应用于 map 函数中的第一次迭代，但其余部分需要为空。

训练变量保存来 self 的 json 文件的数据。我需要将“marginRight:'5%'”样式应用于此 map 方法的第一次迭代。

trainer.js

{ training.map((course, index) => {     
  return (
    <Course name={course.name}
        school={course.school}
        location={course.location}
        year={course.year}
        class={classes}
        key={index}

        style={{marginRight: '5%'}}  <- this works but applies the style to all courses, which is not what I want.

    />
  )
})}

trainerTemplate.js - 这是渲染的模板。 Prop 从 trainer.js 传递到这里

function Course(props){
  return (
    <Fragment>
      <Grid item style={props.style}>

我假设我需要在某处设置一个三元运算符来检查索引 0，但我似乎无法让任何东西工作

Answer 1

与@Kai Qing ansewr相同

{ training.map((course, index) => {     
  return (
    <Course name={course.name}
        school={course.school}
        location={course.location}
        year={course.year}
        class={classes}
        key={index}
style={{marginRight: index === 0 ? '5%' : ''
  }}  
    />
  )
})}