如何从react钩子中的自定义组件获取ref？

在React中，我们可以使用ref属性来引用DOM元素或自定义组件。通常情况下，我们可以通过在类组件中使用React.createRef()来创建一个ref，并将其赋值给组件的ref属性。但是在自定义组件中，我们无法直接通过ref属性来获取ref对象。为了解决这个问题，React提供了forwardRef()函数，它可以将ref对象转发到自定义组件的内部元素。

下面是一个示例，演示了如何从React钩子中的自定义组件获取ref：

import React, { forwardRef, useRef } from 'react';

// 创建一个自定义组件
const CustomComponent = forwardRef((props, ref) => {
  // 在组件内部使用ref
  const inputRef = useRef(null);

  // 将ref对象传递给组件内部的元素
  return <input type="text" ref={ref} />;
});

// 在父组件中使用自定义组件并获取ref
const ParentComponent = () => {
  const ref = useRef(null);

  const handleClick = () => {
    // 通过ref.current来获取DOM元素或自定义组件实例
    console.log(ref.current);
  };

  return (
    <div>
      <CustomComponent ref={ref} />
      <button onClick={handleClick}>获取ref</button>
    </div>
  );
};

在上面的例子中，我们使用forwardRef()将ref对象传递给CustomComponent组件，并在组件内部创建一个inputRef来引用input元素。然后，在ParentComponent中，我们通过使用useRef()来创建一个ref对象，并将其传递给CustomComponent。当点击按钮时，我们可以通过ref.current来访问input元素。

这种方法适用于从React钩子中的自定义组件获取ref，并且可以与其他React特性（如useState、useEffect等）一起使用。对于React中的其他钩子（如useCallback、useMemo等），我们可以类似地通过forwardRef()来转发ref。