Как динамически добавлять стили в атрибут стиля React?

Question

В настоящее время я пытаюсь использовать атрибут стиля React для динамического оформления компонентов React. Первое условие стилизации с использованием атрибута работает правильно, однако при втором условии я получаю эту ошибку: «Ошибка синтаксического анализа: неожиданный токен, ожидаемый«} »« Вот мой код:

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={(parentState.primaryVinRetrieved && field.name === 'makePrimary')
  || (parentState.primaryVinRetrieved && field.name === 'modelPrimary')
  || (parentState.secondaryVinRetrieved && field.name === 'makeSecondary')
  || (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')}
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={
    field.currency && {
      paddingLeft: '10px',
    }
    field.name === 'makePrimary' && {
      color: 'grey',
    }
  }
/>

В основном Я пытаюсь связать дополнительные условия в атрибут style. Не уверен, что это правильный синтаксис для этого. Если есть лучший способ выполнить sh, пожалуйста, сообщите. Спасибо.

Answer 1

Вы можете использовать оператор распространения объекта - это хорошо работает с композицией объектов стиля:

style={{
  ...field.currency ? {
    paddingLeft: '10px',
  } : {},
  ...field.name === 'makePrimary' ? {
    color: 'grey',
    background: 'blue'
  } : {}
}}

Answer 2

1. Вы можете просто добавить новые свойства в объект стилей, так как стили - это ничто, это просто объект, поэтому вы можете добавлять новые свойства следующим образом:

   var data = {}; data ["property"] = 4;

Таким образом, в вашем коде вы можете использовать свой оператор стиля как:

style = { styles }

где, styles это:

let styles = {};
if(field.name === 'makePrimary') styles["color"] = 'grey';
if(field.currency) styles["paddingLeft"] = '10px';

Другой подход заключается в использовании оператора распространения.

Вы можете использовать стилизованный компонент, а также он помогает динамически передавать параметр в файле css. Для получения дополнительной информации об этом перейдите по приведенной ниже ссылке: https://styled-components.com/

Answer 3

Вы можете условно выкладывать объекты.

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={
    (parentState.primaryVinRetrieved && field.name === 'makePrimary') ||
    (parentState.primaryVinRetrieved && field.name === 'modelPrimary') ||
    (parentState.secondaryVinRetrieved && field.name === 'makeSecondary') ||
    (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')
  }
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={{
    ...(field.currency
      ? {
          paddingLeft: '10px',
        }
      : {}),
    ...(field.name === 'makePrimary'
      ? {
          color: 'grey',
        }
      : {}),
  }}
/>;