React多数据表更改标题颜色

import React, { useState } from 'react';

const TitleComponent = () => {
  const [color, setColor] = useState('black');

  return (
    <h1 style={{ color }}>Title</h1>
  );
};

export default TitleComponent;

import React, { useState } from 'react';

const TitleComponent = () => {
  const [color, setColor] = useState('black');
  const [table1Data, setTable1Data] = useState([]);
  const [table2Data, setTable2Data] = useState([]);

  // 根据数据表的内容来决定标题颜色
  useEffect(() => {
    if (table1Data.length > 0 || table2Data.length > 0) {
      setColor('red');
    } else {
      setColor('black');
    }
  }, [table1Data, table2Data]);

  return (
    <h1 style={{ color }}>Title</h1>
  );
};

export default TitleComponent;

import React, { useState } from 'react';

const TitleComponent = () => {
  const [color, setColor] = useState('black');
  const [table1Data, setTable1Data] = useState([]);
  const [table2Data, setTable2Data] = useState([]);

  // 根据数据表的内容来决定标题颜色
  useEffect(() => {
    if (table1Data.length > 0 || table2Data.length > 0) {
      setColor('red');
    } else {
      setColor('black');
    }
  }, [table1Data, table2Data]);

  const handleTable1DataChange = (newData) => {
    setTable1Data(newData);
  };

  const handleTable2DataChange = (newData) => {
    setTable2Data(newData);
  };

  return (
    <div>
      <h1 style={{ color }}>Title</h1>
      <Table1 onChange={handleTable1DataChange} />
      <Table2 onChange={handleTable2DataChange} />
    </div>
  );
};

export default TitleComponent;