/

如何使用useRef React hook

如何使用useRef React hook

了解useRef React hook的用途，以及如何使用它！

如果您对React hooks还不熟悉，请先查看我的React hooks简介。

我有时会使用一个React hook，那就是useRef。

1
import React, { useRef } from 'react'

这个hook使我们可以以命令式的方式访问DOM元素。

这是一个例子，我在控制台打印了包含计数值的span元素的DOM引用的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.

tags: [“React”, “useRef”, “DOM元素”, “hook”]