@uroot

Как задать if-else в стилях?

Есть вот такое:
<p
  style={{ bottom:  (669 * size) / SIZES.MAX }}
>

Как запись { bottom: (669 * size) / SIZES.MAX } закинуть в if, а при else добавить другие значения в style?
Чтобы получилось что-то вроде:
<p
  style={SIZES.MAX > 0 
     ?
     { bottom:  (669 * size) / SIZES.MAX } 
     : 
    { bottom:  (669 * size) } 
  }
>
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
KulakovAngel
@KulakovAngel
Full Stack Developer (Node.JS)
Как заметил Валерий, ошибка, скорее всего, потому, что передаете число. Попробуйте передавать строку (можно использовать "обратные кавычки"):
<p
    style={
        SIZES.MAX > 0 ? {
            bottom:  `${(669 * size) / SIZES.MAX}px`,
            color: `red`
        } : {
            bottom:  `${(669 * size)}px`,
            color: `blue`
        }
    }
>


Но вообще, если стилей много, я бы вынес это из "инлайна". Например, через функцию:
class MyParagraph extends React.Component {
  render() {
    //init values
    const SIZES = {MAX: 45};
    const size = 1;
    
    //get styles
    function getParagraphStyles(condition) {
      if (condition > 0) {
        return {
          bottom: `${(669 * size) / SIZES.MAX}px`,
          color: `red`,
        }
      } else {
        return {
          bottom: `${(669 * size)}px`,
          color: `blue`,
        }
      }
    }
    
    return (
      <p style={getParagraphStyles(SIZES.MAX)}>
        Paragraph
      </p>
    )
  }
};


Еще лучше getParagraphStyles() вынести в метод (если используете классовый подход) или в хук (если используете функциональный подход). Вместо if .. else можно и тернарник заюзать. Можно и стрелку написать - еще короче будет. Но сделал подробнее для наглядности. И да, как заметил Валерий, не забывайте указывать единицы измерения (px, скорее всего). React вроде CSS проверяет и ошибочный не пропускает.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Born2Lose
@Born2Lose
Frontend developer
<p style={{bottom: SIZES.MAX > 0 ? `${(669 * size) / SIZES.MAX}` : `${669 * size}`}}

значения для css полей должны быть строками. Также, нужно добавить единицы измерения(px, em, rem...) для этих значений
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы