组件动态添加Ref【use-dynamic-refs】

背景： 处理复杂的需求时， 组件通过遍历渲染且需要绑定REF 的时候， 普通的useRef 无法满足需求， 这时候就需要用到 use-dynamic-refs 实现

npm install —save use-dynamic-refs

use-dynamic-refs

import React, { useEffect } from 'react';
import useDynamicRefs from 'use-dynamic-refs';
const Example = () =>  {
  const foo = ['random_id_1', 'random_id_2'];
  const [getRef, setRef] =  useDynamicRefs();
  useEffect(() => {
    // Get ref for specific ID 
    const id1 = getRef('random_id_1');
    console.log(id1)
  }, [])
    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>
         {/*  Set refs dynamically in Array.map() */}
        { foo.map((eachId, idx) => (
          <div ref={setRef(eachId)}> Hello {each} </div>))}
      </>
    )
}
export default Example;