根据React中的条件更改表行颜色

import React, { useState } from 'react';

function Table() {
  const [color, setColor] = useState('default');

  // 其他组件代码

  return (
    <table>
      {/* 表头 */}
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      {/* 表格内容 */}
      <tbody>
        <tr style={{ backgroundColor: color }}>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
        </tr>
      </tbody>
    </table>
  );
}

export default Table;

function Table() {
  const [color, setColor] = useState('default');

  const updateColor = (data) => {
    if (data > 10) {
      setColor('red');
    } else {
      setColor('default');
    }
  };

  // 其他组件代码

  return (
    <table>
      {/* 表头 */}
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      {/* 表格内容 */}
      <tbody>
        <tr style={{ backgroundColor: color }}>
          <td>数据1</td>
          <td>{data2}</td>
          <td>数据3</td>
        </tr>
      </tbody>
    </table>
  );
}

function Table() {
  const [color, setColor] = useState('default');

  const updateColor = (data) => {
    if (data > 10) {
      setColor('red');
    } else {
      setColor('default');
    }
  };

  // 其他组件代码

  const data2 = 15; // 假设数据2的值为15
  updateColor(data2);

  return (
    <table>
      {/* 表头 */}
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      {/* 表格内容 */}
      <tbody>
        <tr style={{ backgroundColor: color }}>
          <td>数据1</td>
          <td>{data2}</td>
          <td>数据3</td>
        </tr>
      </tbody>
    </table>
  );
}