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

Question

[uRoot]

Есть вот такое:

<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) } 
  }
>

Comments

[Gary_Ihar]

Так ваше "Чтобы получилось что-то вроде" работает же, нет?

[Валерий Кулаков]

Может быть так имелось ввиду:

<p
  style={{ bottom: (SIZES.MAX > 0) ? ((669 * size) / SIZES.MAX) : (669 * size) }}
>

?

[uRoot]

Gary_Ihar, ошибок нет при сборке. Но при рендеринге такого компонента падает компонент с ошибкой:

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

[uRoot]

Валерий Кулаков, оно. А в такой способ можно завернуть кусок инлайн стилей, а не только bottom как у меня? А то просто что-то не выходит.

[Валерий Кулаков]

CryNet, Тогда Ваш способ, описанный в вопросе, верен. Ошибка, скорее всего, потому что передаете число. Попробуйте передавать строку (можно использовать "обратные кавычки"):

<p
    style={
        SIZES.MAX > 0 ? {
            bottom:  `${(669 * size) / SIZES.MAX}px`,
            color: `red`
        } : {
            bottom:  `${(669 * size)}px`,
            color: `blue`
        }
    }
>

Answer 1

[Валерий Кулаков]

Как заметил Валерий, ошибка, скорее всего, потому, что передаете число. Попробуйте передавать строку (можно использовать "обратные кавычки"):

<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 проверяет и ошибочный не пропускает.

Answer 2

[Валерий]

<p style={{bottom: SIZES.MAX > 0 ? `${(669 * size) / SIZES.MAX}` : `${669 * size}`}}

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