如何将样式动态添加到 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',
    }
  }
/>

基本上我试图将额外的条件链接到样式属性中。 不确定这是否是正确的语法。 如果有更好的方法来完成此操作，请提出建议。 谢谢。

Answer 1

您可以使用对象扩展运算符- 这适用于样式对象组合：

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

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

Answer 3

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

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

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

style = { styles }

其中，样式是：

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

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

3. 您可以使用样式组件以及它有助于在 css 文件中动态传递参数。 如需更多参考，请点击以下链接： https : //styled-components.com/