在 React 中选择 DOM 元素

曾几何时，每个 JavaScript 开发人员都使用过 getElementById() 方法。它接受一个参数 id 并返回一个具有该 ID 的 HTML 元素。此方法对于手动更改 DOM 非常有用。

抓取一个 HTML 元素节点是一种常见的需要。许多在 JavaScript 方面有经验但对 React 框架不熟悉的开发人员想知道如何在 React 中执行此操作。

React 中的引用

Refs 是 references 的缩写，是一种在 React 中访问 DOM 的简单方法。为了将元素（或组件）与引用链接，该元素必须具有等于你的 ref 的 ref 属性。示例 <div> 元素可以通过以下方式链接到 testRef：<div ref={this.testRef}></div>。将 ref 实例存储在变量中是一种很好的做法。

在功能组件中

自从大约两年前引入钩子以来，功能组件变得更加健壮。如果你运行的是现代版本的 React（例如 16.8.0），你可以导入 useRef() 钩子，它可用于定义一个引用。这是在渲染期间引用随机变量的功能组件的示例：

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

在这个例子中，通过设置 elementVariable 等于 useRef() 钩子的实例，我们将 HTML 节点存储在变量中。

除非 HTML 元素将 ref 属性设置为变量名称，否则 Hook 将无法工作。

传递给 useRef() 钩子的一个参数指定了 ref 实例的初始值。一旦 <div></div> 元素挂载，该变量将保存 HTML 节点值。这是控制台的样子：

在类组件中

长期以来，使用类组件是创建交互式 React 组件的默认方式。

自 16.3 版发布以来，React 开发人员可以使用 React.createRef() 来创建引用。API 可能不同，但 React.createRef() 和 useRef() 钩子创建了本质上相同的 ref 实例。

在类组件中，ref 实例存储在类属性中。下面是一个例子：

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

如果你查看控制台，你将看到一个具有 current 属性的对象，其中包含 HTML 节点。

使用 React 16.3 以上版本的开发人员必须使用稍微不同的语法来创建 refs。例子：

<div ref={(element) => this.ref = element}></div>

以这种方式创建的引用称为回调 ref，因为我们将 ref 属性设置为回调函数，该函数将 HTML 元素作为参数并将此值分配给类实例的 ref 属性。