如何动态地将样式添加到 React 样式属性？答案

【问题标题】：How do I dynamically add styles to a React style attribute?如何动态地将样式添加到 React 样式属性？
【发布时间】：2020-04-30 14:49:30
【问题描述】：

我目前正在尝试使用 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',
    }
  }
/>

基本上，我正在尝试将其他条件链接到样式属性中。不确定这是否是正确的语法。如果有更好的方法来完成这个请建议。谢谢。

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

您可以简单地在样式对象中添加新属性，因为样式什么都不是，它只是一个对象，因此您可以像这样添加新属性：

var 数据 = {}; 数据[“属性”] = 4;

因此，在您的代码中，您可以将样式运算符用作：

style = { styles }

其中，样式是：

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

另一种方法是使用扩展运算符。
您可以使用样式化组件，它有助于在 css 文件中动态传递参数。如需更多参考，请点击以下链接： https://styled-components.com/

【讨论】：

【解决方案2】：

您可以有条件地传播对象。

<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',
        }
      : {}),
  }}
/>;

【讨论】：

【解决方案3】：

您可以使用object spread operator - 这适用于样式对象组合：

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

【讨论】：