Javascript 如何将样式动态添加到React样式属性？

我目前正在尝试使用React style属性来动态设置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属性中。不确定这是否是正确的语法。如果有更好的方法来实现这一点，请提出建议。谢谢

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

风格={{
…字段。货币{
左填充：“10px”，
} : {},
…field.name==='makePrimary'{
颜色：“灰色”，
背景：“蓝色”
} : {}
}}

您可以有条件地散布对象

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

；

您只需在styles对象中添加新特性，因为styles什么都不是，它只是一个对象，所以您可以像这样添加新特性：

变量数据={}； 数据[“属性”]=4

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

style = { styles }

其中，样式为：

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

另一种方法是使用扩展运算符

您可以使用样式化组件，也可以帮助在css文件中动态传递参数。有关这方面的更多信息，请点击以下链接：