react获取dom节点
时间: 2023-09-06 22:14:12 浏览: 61
在 React 中获取 DOM 节点有多种方法,以下是其中的一些:
1. 使用 ref 属性
可以在组件中通过 ref 属性获取 DOM 节点。例如,可以在 render 方法中创建一个 div 元素,并将其保存到组件的 ref 属性中:
```
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current);
}
render() {
return <div ref={this.myRef}>Hello, world!</div>;
}
}
```
在 componentDidMount 方法中,可以使用 this.myRef.current 获取到这个 div 元素。
2. 使用回调函数
可以将一个回调函数传递给组件,当组件挂载时,这个函数会被调用并传递组件的 DOM 节点作为参数:
```
class MyComponent extends React.Component {
componentDidMount() {
console.log(this.myNode);
}
render() {
return <div ref={node => this.myNode = node}>Hello, world!</div>;
}
}
```
在 componentDidMount 方法中,可以使用 this.myNode 获取到这个 div 元素。
需要注意的是,使用回调函数的方法在 React 16.3 版本之前是唯一的可靠方法,但是在 React 16.3 版本之后,ref 属性提供了更好的方式来获取 DOM 节点。