ReactJS修改字体颜色报错：Cannot read properties of null (reading 'style')

问题描述 #

在React中编写表格组件，试图根据虚拟货币24小时价格涨跌幅的正负修改字体颜色时，出现以下错误：

Cannot read properties of null (reading 'style')
TypeError: Cannot read properties of null (reading 'style')

原代码如下：

<td className="">
  {props.coins.map(coins => {
      
      if (coins.price_change_percentage_24h > 0) {
          var x = document.getElementById('percent')
          x.style.color = 'red'
      } else {
          var x = document.getElementById('percent')
          x.style.color = 'green'
      }

      return (
          <div id='percent' className="flex flex-col border-b py-6 h-[73px] mx-[-2px] px-2">
              {coins.price_change_percentage_24h.toFixed(2)}%
          </div>
      )
  })}
</td>

错误原因 #

1. DOM渲染时机问题：你在return语句之前就调用了document.getElementById('percent')，此时React还没把<div>渲染到页面的DOM树中，所以获取到的x是null，自然无法读取style属性。
2. 重复id问题：在map循环中给每个生成的<div>都设置了相同的id="percent"，这违反了HTML中id必须唯一的规则，就算DOM渲染完成，getElementById也只会返回第一个匹配的元素，无法给每个条目单独设置颜色。

正确解决方案 #

React的核心思想是用数据驱动UI，不需要直接操作DOM，以下是两种简单可行的实现方式：

方式1：动态绑定inline style

直接在JSX中根据涨跌幅条件设置style属性：

<td>
  {props.coins.map((coin, index) => {
    // 根据涨跌幅判断颜色
    const textColor = coin.price_change_percentage_24h > 0 ? 'red' : 'green';
    return (
      <div 
        key={coin.id || index} // 必须添加唯一key，优先用数据自带的唯一id
        className="flex flex-col border-b py-6 h-[73px] mx-[-2px] px-2"
        style={{ color: textColor }}
      >
        {coin.price_change_percentage_24h.toFixed(2)}%
      </div>
    );
  })}
</td>

方式2：动态切换CSS类（适合Tailwind场景）

如果项目使用Tailwind CSS，可以直接通过条件拼接类名来设置颜色：

<td>
  {props.coins.map((coin, index) => {
    // 根据条件选择颜色类
    const colorClass = coin.price_change_percentage_24h > 0 ? 'text-red-500' : 'text-green-500';
    return (
      <div 
        key={coin.id || index}
        className={`flex flex-col border-b py-6 h-[73px] mx-[-2px] px-2 ${colorClass}`}
      >
        {coin.price_change_percentage_24h.toFixed(2)}%
      </div>
    );
  })}
</td>

重要提示 #

• 循环渲染元素时，必须添加唯一的key属性，这是React的要求，能避免渲染性能问题和警告。优先使用数据中自带的唯一标识（比如每个coin的id），如果没有再用index。
• React中尽量避免直接操作DOM，所有UI变化都应该通过数据（props或state）来驱动，这样才能保证组件状态和UI的一致性。

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