Reactjs 反应：如何在条件渲染中使用内联样式？

我如何处理以下问题：

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

constspeedtest=（{speed}）=>(
80？{{style=color:red}}:{{{style=color:green}}>
{速度>80？“太快了！”：“一切正常”}
);

---

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

这就是您要查找的内容

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

constspeedtest=（{speed}）=>(
80？“红色”：“绿色”}>
{速度>80？“太快了！”：“一切正常”}
);

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

constspeedtest=（{speed}）=>(
80？'red'：'green'}>
{速度>80？“太快了！”：“一切正常”}
);

已更正

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

constspeedtest=（{speed}）=>(
80？'red'：'green'}>
{速度>80？“太快了！”：“一切正常”}
);

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

  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>
    )
   };

constspeedtest=（{speed}）=>{
让style={}
如果（速度>80）{
样式={颜色：'red'}
}否则{
样式={color:'green'}
}
返回(
{速度>80？“太快了！”：“一切正常”}
)
};

ah，我需要在样式声明中设置条件-这就完成了。非常感谢。方法也不错，谢谢！

  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>
    )
   };