如何在React中引用一个DOM元素

了解如何在React中引用一个DOM元素

React很擅长在构建应用程序时将DOM抽象化。

但如果你想访问React组件所代表的DOM元素呢？

也许你需要添加一个直接与DOM交互的库，比如一个图表库，也许你需要调用一些DOM API，或者在一个元素上添加焦点。

不管是什么原因，一个好的做法是确保在不直接访问DOM的情况下没有其他方法。

在你的组件的JSX中，你可以使用这个属性将DOM元素的引用分配给一个组件属性。

ref={el => this.someProperty = el}

把这个放到上下文中，例如用button 元素。

<button ref={el => (this.button = el)} />

button 指向组件的一个属性，然后它可以被组件的生命周期方法（或其他方法）用来与DOM交互。

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

在一个函数组件中，机制是相同的，你只是避免使用this （因为它不指向组件实例）而使用一个属性。

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}