如何使用useRef React钩子

找出useRef React钩子有什么用,以及如何使用它!

看看我的React钩子介绍首先,如果您是他们的新手。

我有时使用的一个React钩子是useRef

import React, { useRef } from 'react'

这个钩子允许我们强制性地访问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

在Codepen上查看:

看笔反应useRef钩子由Flavio Copes(@flaviocopes) 在密码笔

Tech Wiki Online!