Нужна помощь в настройке условия в JSX - PullRequest
Новая
       17

Нужна помощь в настройке условия в JSX

2 голосов
/ 16 мая 2019

Я перебираю блок кода JSX, который получает данные из файла json и отображается в DOM.Мне нужно применить стиль к первой итерации в моей функции карты, но остальные должны быть пустыми.

Обучающая переменная содержит данные из моего файла 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, но я не могу заставить что-либо работать

Ответы [ 3 ]

3 голосов
/ 16 мая 2019

Попробуйте, я думаю, что это немного понятнее, чем встроить: 

{ 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}  
    />
  )
})}
3 голосов
/ 16 мая 2019

это так же, как @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%' : ''
  }}  
    />
  )
})}
2 голосов
/ 16 мая 2019

Если вы условно хотите установить поле только для первого элемента, вы можете попробовать это: Этот метод передает стиль attr для первого элемента и воздерживается от перезаписи ранее установленного поля, если в этом случае индекс не принадлежит первому элементу.

{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%" } : {}}
   />
  );
})}
...