了解useRef React hook的用途,以及如何使用它!
如果您对React hooks还不熟悉,请先查看我的React hooks简介。
我有时会使用一个React hook,那就是useRef
。
import React, { useRef } from 'react'
这个hook使我们可以以命令式的方式访问DOM元素。
这是一个例子,我在控制台打印了包含计数值的span元素的DOM引用的值:
import React, { useState, useRef } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
const counterEl = useRef(null)
const increment = () => {
setCount(count + 1)
console.log(counterEl)
}
return (
<>
Count: <span ref={counterEl}>{count}</span>
<button onClick={increment}>+</button>
</>
)
}
ReactDOM.render(<Counter />, document.getElementById('app'))
请注意const counterEl = useRef(null)
这一行,以及<span ref={counterEl}>{count}</span>
。这是设置链接的地方。
现在,我们可以通过访问counterEl.current
来访问DOM引用。
在Codepen上查看效果:
查看Pen React useRef hook by Flavio Copes (@flaviocopes) on CodePen.