React：如何在条件渲染中使用内联样式？ [复制]

Posted 2023-03-16

【中文标题】React：如何在条件渲染中使用内联样式？ [复制]

【英文标题】：React: How to use inline styles in conditional rendering? [duplicate]

【发布时间】：2020-04-19 00:52:45

【问题描述】：

我该如何处理以下情况：

const SpeedTest = ( speed ) => (
  <div speed > 80 ? style=color:red : style=color:green >
    speed > 80 ? "Too fast!" : "All fine"
  </div>
);

有条件的文本更改工作正常，但我无法完成颜色更改。

【参考方案1】：

你可以这样做（记得在内联样式值周围使用引号）：

const SpeedTest = ( speed ) => (
  <div style= color: speed > 80 ? 'red' : 'green' >
    speed > 80 ? "Too fast!" : "All fine"
  </div>
);

【讨论】：

啊，我需要在样式声明中设置条件——这样就可以了。谢谢！

【参考方案2】：

这就是你要找的东西

const SpeedTest = ( speed ) => (
  <div style= color: speed > 80 ? "red" : "green" >
    speed > 80 ? "Too fast!" : "All fine"
  </div>
);

【参考方案3】：

更正

const SpeedTest = ( speed ) => (
  <div style=color: speed>80 ?'red':'green'>
    speed > 80 ? "Too fast!" : "All fine"
  </div>
);

【参考方案4】：

您可以在变量中保存样式，然后根据条件更改其值

  const SpeedTest = ( speed ) => 
   let style=
     if(speed>80)
        style=color:'red'
     else
        style=color:'green'
     
    return (
      <div style=style>
         speed > 80 ? "Too fast!" : "All fine"
     </div>
    )
   ;

【讨论】：

也不错，谢谢！