Useref create dynamic reference

useRef Return to a variable ref object , Its .current Property is initialized to the parameter passed in （initialValue）. Back to ref Objects persist throughout the life cycle of a component .

Daily development , May come across ： Dynamic creation ref quote . For example, according to the background data , To dynamically generate html Elements , And binding events .

according to useRef The definition of , During initialization, parameter values can be defined as arrays or objects , Then dynamically add element references .

Example , Use ref={el => { domRefs.current[index] = el }} ：

//  Initialize to array 
const domRefs = useRef([])
//  Initialize as object 
// const domRefs = useRef({})
import { useRef } from 'react'
const Index = () => {
    const domRefs = useRef([])

    return (
        <ul>
            {
                new Array(10).fill(0).map((item, index) =>
                    <li
                        key={index}
                        style={
   {
                            height: 20,
                            background: '#ccc',
                            margin: 10
                        }}
                        ref={el => { domRefs.current[index] = el }}
                        onClick={() => { console.log(domRefs, domRefs.current[index]) }}
                    >
                        {index + 1}
                    </li>
                )
            }
        </ul>
    )
}