功能组件中的 ref

在React中，ref是一个用于访问组件实例或DOM节点的方法。通常情况下，我们可以通过在组件中使用ref来获取组件实例或操作DOM。

使用ref获取组件实例

在功能组件中，可以使用useRef钩子来创建一个ref对象。useRef返回一个可变的ref对象，它的current属性会被初始化为传递给useRef的参数。

import React, { useRef } from 'react';

const MyComponent = () => {
  const myRef = useRef();

  // 通过ref.current来访问组件实例

  return <div ref={myRef}>This is my component.</div>;
};

在上面的例子中，我们创建了一个myRef对象，并将它传递给了一个div元素的ref属性。这样，我们就可以通过myRef.current来访问这个div元素的实例。

使用ref操作DOM

除了访问组件实例，ref还可以用于直接操作DOM。通过在功能组件中使用useRef来创建一个ref对象，并将它传递给需要操作的DOM元素的ref属性，就可以在组件中直接操作这个DOM元素。

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

在上面的例子中，我们创建了一个inputRef对象，并将它传递给了一个input元素的ref属性。然后，通过inputRef.current获取到了这个input元素的实例，并在focusInput函数中使用了focus方法将焦点设置到了这个输入框上。

总结

在功能组件中，ref可以用于获取组件实例或操作DOM。通过使用useRef钩子来创建ref对象，并将其传递给需要访问的组件或DOM元素的ref属性，可以方便地进行操作。使用ref能够增强我们对组件和DOM的控制能力，但也需要注意不要滥用ref，以免破坏React的数据流和组件封装性。