react动态创建绑定dom的ref

一个有关富文本编辑器的需求
封装的quill编辑器需要通过ref来操作获取输出内容，而编辑器是动态增加的，所以不能一开始就定义好每个ref，所以选择动态生成～

动态生成

这里不能用useRef，因为钩子只能单独定义，可以使用react提供的另一个方法createRef()
比如说数据传来了一个arr[]的数据列表，就可以使用遍历增加一个空的createRef()，到定义好的state中

const [refArr,setRefArr] = useState([]); // ref数组
const [data,setData] = useState([]); // 获取的数据

// 模拟请求
const getRefArr = async() =>{
    const {data} = await getData()
    setData(data)
    const arr = data.map(() => {
          return createRef<HTMLDivElement>();
    });
    setRefArr([...arr]);
}

使用

{refArr?.map((item, index) => (
    // 封装的编辑器
    <Qeditor
         ref={item}
         initContent={data[index]?.dom}
    />
)}

遇到的坑

生成的时候一开始想着快速生成几个一样的就行了，所以用的方法是fill()，想着能快速生成

refArr.push(...new Array(datat.length).fill(createRef<HTMLDivElement>()))

但是这样生成的是不行的，得到的fef都是相同的内容（默认绑定了遍历的最后一个dom），所以不能用！