16 使用 `Refs` 直接操作 DOM

在 React 中，Refs 是一种用于访问和操作组件中的 DOM 节点的方式。通常情况下，React 鼓励使用状态管理和数据流来控制组件，但在某些情况下，我们确实需要直接操作 DOM，这时我们可以使用 Refs。

1. 什么是 Refs

Refs 提供了一种方式，用于在 React 组件中访问和操作 DOM 元素。它们可以用于多种情况，比如：

• 聚焦输入框
• 播放/暂停视频
• 动态调整某个组件的尺寸

2. 创建 Refs

在 React 组件中，我们可以使用 React.createRef() 创建 Refs。下面是一个简单的示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 创建 Ref
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // 通过 Ref 访问 input 元素并聚焦
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>聚焦输入框</button>
      </div>
    );
  }
}

export default MyComponent;

在这个例子中，我们创建了一个 inputRef，并将它分配给 input 元素的 ref 属性。点击按钮时，调用 focusInput 方法聚焦输入框。

3. 在函数组件中使用 Refs

在函数组件中，我们可以使用 useRef 钩子来创建 Refs。示例如下：

import React, { useRef } from 'react';

const MyFunctionComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通过 Ref 访问 input 元素并聚焦
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
};

export default MyFunctionComponent;

在这个例子中，我们使用 useRef 创建 inputRef，达到同样的效果。

4. 使用 Refs 获取 DOM 元素的信息

除了操控 DOM 元素，Refs 还可以用来获取元素的各种信息，如位置、尺寸等。例如，我们可以获取输入框的宽度：

import React, { useRef } from 'react';

const InputWidthComponent = () => {
  const inputRef = useRef(null);

  const getInputWidth = () => {
    if (inputRef.current) {
      alert(`输入框的宽度是: ${inputRef.current.offsetWidth}px`);
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={getInputWidth}>获取输入框宽度</button>
    </div>
  );
};

export default InputWidthComponent;

5. 使用 Refs 与第三方库集成

有时我们需要与第三方 DOM 库（如 jQuery）进行集成。这时我们也可以使用 Refs。例如，在一个通过 Refs 获取 DOM 的组件中，调用 jQuery 操作：

import React, { useRef, useEffect } from 'react';
import $ from 'jquery';

const JqueryComponent = () => {
  const divRef = useRef(null);

  useEffect(() => {
    // 使用 jQuery 对 div 进行操作
    $(divRef.current).hide().fadeIn();
  }, []);

  return <div ref={divRef}>这是一个可以用 jQuery 操作的 DIV</div>;
};

export default JqueryComponent;

在这个例子中，使用 useEffect 钩子确保在组件挂载后使用 jQuery 操作该 div。

总结

• Refs 是一种用于访问和操作 React 组件中的 DOM 元素的方式。
• 借助 React.createRef() 和 useRef() 可以创建 Refs。
• 可以直接通过 Refs 访问和操作 DOM 属性和方法。
• Refs 也可以与第三方库结合使用。

通过学习和实践 Refs 的使用，可以帮助你更加灵活地操作组件和 DOM，增强用户体验。