如何给子组件对根组件中react钩子的控制

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

function App() {
  const [hookValue, setHookValue] = useState('');

  const handleHookChange = (value) => {
    setHookValue(value);
  };

  return (
    <div>
      <ChildComponent hookValue={hookValue} onHookChange={handleHookChange} />
    </div>
  );
}

export default App;

// 子组件
import React from 'react';

function ChildComponent({ hookValue, onHookChange }) {
  const handleChange = (e) => {
    const value = e.target.value;
    onHookChange(value);
  };

  return (
    <div>
      <input type="text" value={hookValue} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

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

export const HookContext = createContext();

function App() {
  const [hookValue, setHookValue] = useState('');

  const handleHookChange = (value) => {
    setHookValue(value);
  };

  return (
    <div>
      <HookContext.Provider value={{ hookValue, onHookChange: handleHookChange }}>
        <ChildComponent />
      </HookContext.Provider>
    </div>
  );
}

export default App;

// 子组件
import React, { useContext } from 'react';
import { HookContext } from './App';

function ChildComponent() {
  const { hookValue, onHookChange } = useContext(HookContext);

  const handleChange = (e) => {
    const value = e.target.value;
    onHookChange(value);
  };

  return (
    <div>
      <input type="text" value={hookValue} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;