在react中将数据添加到子项时更新父项中的数据

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState([]);

  // 添加数据到子项并更新父项数据的函数
  const addChildData = (childData) => {
    setData([...data, childData]);
  };

  return (
    <div>
      {/* 渲染子组件并传递添加数据的函数 */}
      <ChildComponent addChildData={addChildData} />
    </div>
  );
}

import React from 'react';

function ChildComponent({ addChildData }) {
  // 添加数据到子项的函数
  const handleAddData = () => {
    const childData = 'New Data'; // 要添加的数据
    addChildData(childData); // 调用父组件传递的函数，将数据添加到父项
  };

  return (
    <div>
      <button onClick={handleAddData}>添加数据到子项</button>
    </div>
  );
}