react父组件调用子组件内部的dom或方法

在 React 中，通过 React.forwardRef 和 useImperativeHandle 可以实现将父组件的 ref 转发给子组件，从而引用子组件的 DOM 或方法。以下是实现的步骤和代码示例：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

const Child = forwardRef((props, ref) => {
  const inputRef = useRef();
   //暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    clear: () => {
      inputRef.current.value = "";
    },
  }));

  return <input ref={inputRef} type="text" placeholder="Enter something" />;
});

function Parent() {
  const childRef = useRef();

  const handleFocus = () => {
    childRef.current.focus();
  };

  const handleClear = () => {
    childRef.current.clear();
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleClear}>Clear Input</button>
    </div>
  );
}

export default Parent;