博客

当我们在react中需要做一些dom操作时，就会使用到react给我们预留的“后门”。

之所以称之为“后门”，是因为当前流行框架react/vue出现的目的就是避免操作dom，造成渲染浪费。然而很多时候不能不操作dom。

1、通过React.createRef()/useRef();来创建一个ref变量。

// 类组件中
constructor (props) {
    super(props);
    this.myRef = React.createRef();
}
// 函数组件中（使用hooks）
const myRef = useRef();

2、在对应的dom节点上写入ref。

// 类组件
<div className="t-box scroll-bar" ref={this.myRef}>
	...
</div>

// 函数组件
<div className="t-box scroll-bar" ref={myRef}>
	...
</div>

3、使用react-dom中的findDomNode()得到具体的dom。

import ReactDom from 'react-dom';
// 类组件
const getTargetDOM = ReactDom.findDOMNode(this.myRef.current);
// 函数组件
const getTargetDOM = ReactDom.findDOMNode(myRef.current);

4、根据获取的dom进行一些dom操作即可。例如操作js盒模型、设置文字样式等等。

// 设置向上滚动距离
getTargetDOM.scrollTop = 1000;
getTargetDOM.style.color = 'red';