Refs：揭开 React DOM 控制的秘密

2023-12-07 06:58:13

React 技巧：Refs，揭秘 DOM 控制的秘密

在 React 的世界里，数据流是至关重要的，它决定了应用程序的状态和 UI 渲染。然而，有时我们需要超越典型的数据流，直接接触 DOM 节点或组件实例。这就是 Refs 大显身手的时候了。

Refs 的本质

Refs 是 React 提供的一种引用机制，允许我们在 render 方法中创建的组件或 DOM 节点上附加一个引用。这让我们能够在以后访问这些元素，即使它们在组件树中发生了变化。

引用 DOM 节点

引用 DOM 节点是 Refs 最直接的用途之一。让我们看一个例子：

import React, { useRef } from 'react';

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

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

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

在这个示例中，我们使用 useRef 钩子创建了一个名为 inputRef 的引用，并将其附加到输入字段上。然后，我们定义了一个 focusInput 函数，该函数检查 inputRef.current 是否存在，如果存在，则将输入字段聚焦。

引用组件实例

Refs 不仅可以用于 DOM 节点，还可以用于组件实例。这允许我们在组件之间建立通信或访问内部状态。

import React, { useRef } from 'react';

const ChildComponent = (props) => {
  return <div>Child Component</div>;
};

const ParentComponent = () => {
  const childRef = useRef(null);

  const accessChildState = () => {
    if (childRef.current) {
      console.log(childRef.current.state);
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={accessChildState}>Access Child State</button>
    </>
  );
};