如何在 React 中正确根据数值正负动态设置字体颜色

在 react 中不应直接操作 dom 元素样式（如 `document.getelementbyid().style`），而应使用内联样式或 css 类结合条件渲染来实现动态颜色控制，避免因元素未挂载或重复 id 导致的 `cannot read properties of null` 错误。

React 是声明式 UI 框架，其核心原则是状态驱动视图，而非命令式地手动修改 DOM。您原始代码中存在两个关键问题：

1. DOM 元素尚未挂载即被访问：document.getElementById('percent') 在 map 循环中执行时，对应
   尚未渲染到页面，返回 null，导致 .style 访问报错；
2. 重复 ID 违反 HTML 规范：id="percent" 在 map 中被多次生成，造成 ID 冲突，getElementById 行为不可预测（通常只返回第一个匹配元素）。

✅ 正确做法是将样式逻辑内联到 JSX 中，利用 JavaScript 三元表达式或对象展开动态计算 style 属性：


Kacha
KaCha是一款革命性的AI写真工具，用AI技术将照片变成杰作！
下载

<td className="">
  {props.coins.map((coins, index) => (
    <div
      key={index} // ⚠️ 必须添加 key！避免列表渲染异常
      className="flex flex-col border-b py-6 h-[73px] mx-[-2px] px-2"
      style={{
        color: coins.price_change_percentage_24h > 0 ? 'red' : 'green',
      }}
    >
      {coins.price_change_percentage_24h.toFixed(2)}%
    </div>
  ))}
</td>

? 关键要点说明：

• key 属性不可省略：React 列表渲染必须提供唯一、稳定 key（推荐使用 coins.id 而非 index，除非数据顺序绝对固定且无增删）；
• 样式用 style 对象而非字符串：React 的 style 接受 camelCase 驼峰命名的对象（如 backgroundColor，非 background-color）；
• 避免硬编码颜色值：可进一步抽离为 CSS 变量或主题配置，例如：

  const getColor = (value) => value > 0 ? '#ef4444' : '#22c55e'; // 更专业的红/绿
  // 然后在 style 中写：color: getColor(coins.price_change_percentage_24h)

? 进阶建议：
若需复用样式逻辑或支持深色模式，推荐使用 CSS Modules 或 Tailwind 的条件类名（配合 className 动态拼接）：

className={`flex flex-col border-b py-6 h-[73px] mx-[-2px] px-2 ${
  coins.price_change_percentage_24h > 0 ? 'text-red-500' : 'text-green-500'
}`}

总结：永远优先用 React 的声明式方式（style 或 className + 条件表达式）控制样式，彻底摒弃 document.getElementById、querySelector 等命令式 DOM 操作——这不仅是修复错误的手段，更是遵循 React 设计哲学的关键实践。