了解如何在React中引用DOM元素
React在构建应用程序时很擅长将DOM抽象化。但是,如果您想要访问React组件表示的DOM元素怎么办?也许您需要添加一个与DOM直接交互的库,比如图表库,或者需要调用一些DOM API或在一个元素上设置焦点。
无论原因如何,一个良好的实践是确保在直接访问DOM之前没有其他方法可以实现。
在组件的JSX中,您可以使用ref
属性将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)} />;
}