如何在更新子组件内部的状态时重新呈现该子组件

import React, { useState } from 'react';

const ChildComponent = () => {
  const [count, setCount] = useState(0);

  // 其他组件逻辑...

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ChildComponent;

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

const ParentComponent = () => {
  const [refresh, setRefresh] = useState(false);

  const handleRefresh = () => {
    setRefresh(!refresh);
  };

  return (
    <div>
      <ChildComponent refresh={refresh} onRefresh={handleRefresh} />
      <button onClick={handleRefresh}>Refresh Child Component</button>
    </div>
  );
};

export default ParentComponent;

import React, { useState, useEffect } from 'react';

const ChildComponent = ({ refresh, onRefresh }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(0); // 重置状态
  }, [refresh]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={onRefresh}>Refresh</button>
    </div>
  );
};

export default ChildComponent;