Question

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

训练变量保存我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 -这是呈现的模板。道具从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%' : ''
  }}  
    />
  )
})}

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

如果您有条件地希望仅为第一项设置边距，则可以尝试以下操作：该方法为firstone传递样式属性，并在索引不属于第一个元素的情况下避免覆盖先前设置的边距。

{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中设置条件

3 个答案: