React挂钩从多个子组件更新父状态

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('');

  // 定义用于更新父状态的回调函数
  const updateParentState = (data) => {
    setParentState(data);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent onUpdateState={updateParentState} />
      <ChildComponent onUpdateState={updateParentState} />
    </div>
  );
}

// 子组件
import React, { useState } from 'react';

function ChildComponent({ onUpdateState }) {
  const [childState, setChildState] = useState('');

  const updateChildState = () => {
    // 更新子状态
    setChildState('Child Component Updated');

    // 调用父组件传递的回调函数，将子状态传递给父组件
    onUpdateState(childState);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={updateChildState}>Update Parent State</button>
    </div>
  );
}