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

【问题标题】：React: How to use inline styles in conditional rendering? [duplicate]React：如何在条件渲染中使用内联样式？ [复制]
【发布时间】：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>
);

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

【问题讨论】：

标签： reactjs

【解决方案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>
    )
   };

【讨论】：

也不错，谢谢！