React 中的 ref 是什么，如何使用？

前端

2023-10-08 18:54:31

在 React 中，ref 是一个特殊的属性，它允许你在 React 组件中访问 DOM 元素或 React 组件实例。ref 的使用场景有很多，比如：

访问 DOM 元素，以便对其进行操作，例如：获取元素的尺寸、位置等。
访问 React 组件实例，以便调用组件的方法或获取组件的属性。
创建可重复使用的组件，以便在其他地方复用。

如何使用 ref

有两种方法可以使用 ref：

字符串 ref
回调函数 ref

字符串 ref

字符串 ref 是最简单的方法，它允许你为 React 组件指定一个 ref 属性，该属性的值是一个字符串，该字符串将被用作 DOM 元素或 React 组件实例的 id。

const MyComponent = (props) => {
  const inputRef = React.createRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

在上面的示例中，我们为 input 元素指定了一个 ref 属性，该属性的值是 inputRef。当用户点击按钮时，我们调用 handleClick() 函数，该函数使用 inputRef.current.value 获取 input 元素的 value 值。

回调函数 ref

回调函数 ref 是一种更灵活的方式来使用 ref，它允许你传递一个回调函数给 React.createRef() 函数，该回调函数将在 React 组件挂载后被调用，并传递 DOM 元素或 React 组件实例作为参数。

const MyComponent = (props) => {
  const inputRef = React.createRef((instance) => {
    console.log(instance.value);
  });

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

在上面的示例中，我们为 input 元素指定了一个 ref 属性，该属性的值是一个回调函数，该回调函数在 input 元素挂载后被调用，并传递 input 元素的实例作为参数。当用户点击按钮时，我们调用 handleClick() 函数，该函数使用 inputRef.current.value 获取 input 元素的 value 值。