在 react 中不应直接操作 dom 元素样式（如 `document.getelementbyid().style`），而应使用内联样式或 css 类结合条件渲染来实现动态颜色控制，避免因元素未挂载或重复 id 导致的 `cannot read properties of null` 错误。
React 是声明式 UI 框架，其核心原则是状态驱动视图，而非命令式地手动修改 DOM。您原始代码中存在两个关键问题：
- DOM 元素尚未挂载即被访问：document.getElementById('percent') 在 map 循环中执行时，对应 <div> 尚未渲染到页面，返回 null，导致 .style 访问报错；
- 重复 ID 违反 HTML 规范：id="percent" 在 map 中被多次生成，造成 ID 冲突，getElementById 行为不可预测（通常只返回第一个匹配元素）。
✅ 正确做法是将样式逻辑内联到 JSX 中，利用 JavaScript 三元表达式或对象展开动态计算 style 属性：
<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 设计哲学的关键实践。
