React：条件渲染中内联样式的正确用法及样式不生效问题解决

一、React条件渲染中使用内联样式的常见方式 #

其实在React里用条件渲染控制内联样式挺灵活的，给你几种常用的写法：

• 提前定义样式对象，按需选择
  如果样式比较复杂或者需要复用，先把不同状态的样式对象定义好，再用条件判断选哪个：

  const highSpeedStyle = { color: 'red', fontWeight: 'bold' };
  const normalSpeedStyle = { color: 'green', fontSize: '14px' };
  
  const SpeedTest = ({ speed }) => (
    <div style={speed > 80 ? highSpeedStyle : normalSpeedStyle}>
      {speed > 80 ? "Too fast!" : "All fine"}
    </div>
  );
  

• 直接在style属性里写三元表达式
  如果只是单个样式属性变化，直接在style对象里用三元表达式更简洁：

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

• 复杂条件用展开运算符合并样式
  要是基础样式不变，只有部分样式根据条件变化，可以用展开运算符把公共样式和条件样式合并：

  const SpeedTest = ({ speed }) => (
    <div 
      style={{
        padding: '8px',
        border: '1px solid #eee',
        ...(speed > 80 ? { color: 'red', backgroundColor: '#ffebee' } : { color: 'green', backgroundColor: '#e8f5e9' })
      }}
    >
      {speed > 80 ? "Too fast!" : "All fine"}
    </div>
  );
  

二、修复你的SpeedTest组件样式不生效问题 #

你的组件里文本切换正常，但样式没生效，问题出在JSX的语法错误上：

你原来写的：

<div {speed > 80 ? {{style=color:red}} : {{style=color:green}} }>

这里有两个关键错误：

1. 传递属性的方式错了：React里要给元素加属性，得直接写style={...}，而不是把整个条件结果包在大括号里当“属性块”
2. 样式对象的语法错了：React的内联样式必须是合法的JavaScript对象，键值对要用冒号分隔，字符串值要加引号，正确的写法是{ color: 'red' }，而不是{{style=color:red}}这种错误格式

给你修复后的代码，两种写法任选：

简洁版（直接在style里写三元） #

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

清晰版（拆分样式变量） #

const SpeedTest = ({ speed }) => {
  // 根据speed动态生成样式对象
  const textStyle = {
    color: speed > 80 ? 'red' : 'green'
  };

  return (
    <div style={textStyle}>
      {speed > 80 ? "Too fast!" : "All fine"}
    </div>
  );
};

这样修改后，当speed超过80时文本会变成红色，否则是绿色，样式就能正常生效啦~

内容的提问来源于stack exchange，提问作者JonSnow