如何在使用react钩子时通知父组件属性更改？

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleCountChange = (newCount) => {
    setCount(newCount);
  };

  return (
    <div>
      <ChildComponent onCountChange={handleCountChange} />
      <p>Count: {count}</p>
    </div>
  );
}

// 子组件
function ChildComponent({ onCountChange }) {
  const handleClick = () => {
    onCountChange(10); // 通知父组件属性更改
  };

  return <button onClick={handleClick}>Update Count</button>;
}

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 监听子组件属性的变化
    console.log("Count changed:", count);
  }, [count]);

  return (
    <div>
      <ChildComponent count={count} setCount={setCount} />
      <p>Count: {count}</p>
    </div>
  );
}

// 子组件
function ChildComponent({ count, setCount }) {
  const handleClick = () => {
    setCount(10); // 通知父组件属性更改
  };

  return <button onClick={handleClick}>Update Count</button>;
}

// 创建一个Context
const CountContext = React.createContext();

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
      <p>Count: {count}</p>
    </CountContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

  const handleClick = () => {
    setCount(10); // 通知父组件属性更改
  };

  return <button onClick={handleClick}>Update Count</button>;
}