反应钩子。如何将参数从一个元素传递到另一个元素

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

function ParentComponent() {
  const [param, setParam] = useState('');

  const handleParamChange = (value) => {
    setParam(value);
  };

  return (
    <div>
      <ChildComponent param={param} onParamChange={handleParamChange} />
    </div>
  );
}

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

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

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

export default ParentComponent;

// 创建上下文
import React from 'react';

const ParamContext = React.createContext();

export default ParamContext;

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

function ParentComponent() {
  const [param, setParam] = useState('');

  const handleParamChange = (value) => {
    setParam(value);
  };

  return (
    <ParamContext.Provider value={param}>
      <ChildComponent onParamChange={handleParamChange} />
    </ParamContext.Provider>
  );
}

export default ParentComponent;

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

function ChildComponent({ onParamChange }) {
  const param = useContext(ParamContext);

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

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

export default ChildComponent;