Découvrez à quoi sert le hook useRef React et comment l'utiliser!
Découvrez monPrésentation des crochets Reactd'abord, si vous êtes nouveau pour eux.
Un hook React que j'utilise parfois estuseRef
.
import React, { useRef } from 'react'
Ce hook nous permet d'accéder impérativement à un élément DOM.
Voici un exemple, où je connecte à la console la valeur de la référence DOM de l'élément span qui contient la valeur de comptage:
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’))
Remarquez leconst counterEl = useRef(null)
ligne, et le<span ref={counterEl}>{count}</span>
. C'est ce qui établit le lien.
Nous pouvons maintenant accéder à la référence DOM en accédantcounterEl.current
.
A voir sur Codepen:
Voir le styloRéagir l'utilisationRef hookpar Flavio Copes (@flaviocopes) surCodePen.
Tech Wiki Online!