Как добавлять react-атрибуты по условию?

Question

[IT_OSNOVA]

Доброго времени суток.

Есть компонент, который отвечает за вывод пагинации.
В return компонента пагинация выводится следующим образом:

return (
            <div className = "Question-list">
                {this.props.data.map((value, index) => <li onClick = {this.setChosenQuestionNumber}
                                                           key = {this.props.data[index]['id']}
                                                           className="Question-list-item">
                                                                <span className="question-list-number">{index + 1}
                                                                </span>
                                                           </li>)}
            </div>
        )

В зависимости от приходящего в компонент props (массив) нужно присваивать кнопке пагинации (<li>) тот или иной класс.

Подскажите, пожалуйста, как это сделать.

Answer 1

[Антон Спирин]

Вариант 1:

<li className={someCondition ? someClass : someOtherClass} />

где someCondition условие, например:
someProp === SOME_CONSTRANT

Вариант2:
<li className={getClassName(someProp)} />

Вы передаете в вызове map элемент первым аргументом, но при этом обращаетесь к нему через массив:
key = {this.props.data[index]['id']}
очень нелогичный ход, исправьте на:
key = {value.id}

Comments

[IT_OSNOVA]

Спасибо, с тернарным оператором сглупил с синтаксисом, в опции ставил: className="Question-list-item"

Если можно, еще один уточняющий вопрос. Как реализовать в условии someCondition более сложную логику:
- Если А (true) и Б (true), то 1й вариант
- Если А (true) и Б (false), то 1й вариант
- Если А (false) и Б (true), то 3й вариант
- Если А (false) и Б (false), то 2й вариант

key = {value.id}

Спасибо, ошибка была.

[Антон Спирин]

IT_OSNOVA, как вариант написать условие:

function getClassName() {
  if (A && !B) {
    return 'variant1';
  } else if (!A && B) {
    return 'variant2';
  } else {
    return 'variant3';
  }
}

Но можно использовать библиотеку classnames:

render () {
  const classes = classNames({
      'variant-1': A && !B,
      'variant-2': !A && B,
      'variant-3': !A && !B,
    });
    return <Example className={classes}></Example>;
  }

От себя посоветую использовать библиотеку styled-components.

[IT_OSNOVA]

Антон Спирин, Спасибо за помощь.

Answer 2

[lnked]

return (
    <div className="Question-list">
        {this.props.data.map((value, index) => {
            const cn = []

            if (value === 1) {
                cn.push('Question-list-item--current')
            }
            else {
                cn.push('Question-list-item')
            }

            return <li onClick={this.setChosenQuestionNumber} key={value.id} className={cn.join(' ')}>
                <span className="question-list-number">{index + 1}</span>
            </li>
        })}
    </div>
)