如何使用useRef的React钩 hooks

找出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 来访问DOM引用。

在Codepen上看到。

请看Flavio Copes (@flaviocopes)在CodePen上写的PenReact useRef挂钩。