如何从带有钩子的子组件重新渲染父组件？

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

function ParentComponent() {
  const [shouldUpdate, setShouldUpdate] = useState(false);

  const handleChildUpdate = () => {
    setShouldUpdate(true);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent shouldUpdate={shouldUpdate} onUpdate={handleChildUpdate} />
    </div>
  );
}

export default ParentComponent;

import React, { useEffect } from 'react';

function ChildComponent({ shouldUpdate, onUpdate }) {
  useEffect(() => {
    if (shouldUpdate) {
      // 执行一些需要重新渲染父组件的操作

      // 调用父组件传递的钩子函数来通知父组件重新渲染
      onUpdate();
    }
  }, [shouldUpdate, onUpdate]);

  return (
    <div>
      <h2>Child Component</h2>
      {/* 子组件的内容 */}
    </div>
  );
}

export default ChildComponent;