需要帮助在 JSX 中设置条件

Question

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

训练变量保存我的 json 文件中的数据。我需要将样式 "marginRight:'5%'" 应用于此映射方法的第一次迭代。

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 - 这是呈现的模板。道具从 trainer.js

传递到这里

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

我假设我需要在某个地方设置一个三元运算符来检查索引是否为 0，但我似乎无法正常工作

Answer 1

同@凯青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%' : ''
  }}  
    />
  )
})}

Answer 2

试试这个，我认为它比内联更清楚一点：

{ training.map((course, index) => {
  const style = index === 0 ? { marginRight: '5%' } : null; // then use this as the style later
  return (
    <Course 
        name={course.name}
        school={course.school}
        location={course.location}
        year={course.year}
        className={classes} // also change this to className, not class
        key={index} // if you can, avoid using the index as the key
        style={style}  
    />
  )
})}

Answer 3

如果你有条件地想单独为第一项设置边距，你可以试试这个：这个为第一条传递样式属性，如果索引不属于，则避免over-writing先前设置边距第一个元素。

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

需要帮助在 JSX 中设置条件

Need help setting up a conditional in JSX

reactjs

material-ui

ternary-operator