React set Hook来自外部组件的函数调用

// 父组件
function ParentComponent() {
  const handleClick = () => {
    // 处理点击事件
  }

  return (
    <ChildComponent onClick={handleClick} />
  );
}

// 子组件
function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>点击按钮</button>
  );
}

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

// 父组件
function ParentComponent() {
  const handleClick = () => {
    // 处理点击事件
  }

  return (
    <MyContext.Provider value={handleClick}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const handleClick = React.useContext(MyContext);

  return (
    <button onClick={handleClick}>点击按钮</button>
  );
}

// 自定义Hook
function useHandleClick() {
  const handleClick = () => {
    // 处理点击事件
  }

  return handleClick;
}

// 父组件
function ParentComponent() {
  const handleClick = useHandleClick();

  return (
    <ChildComponent onClick={handleClick} />
  );
}

// 子组件
function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>点击按钮</button>
  );
}