react hooks使用ref对遍历的组件取值方式

父组件代码

import React, { useEffect, useRef } from 'react'
import { Button, Upload } from 'antd'
import AddCom from './components/add'

// 需要遍历的数据
const mapList = [
  {
    key: "1",
    value: {}
  },
  {
    key: "2",
    value: {}
  },
  {
    key: "3",
    value: {}
  }
]

const Index = (props: any) => {
//创建ref 数组 保存遍历组件
  const refMap = useRef([])

  const getData = ()=>{
    const data = []
    mapList.map(item=>{
      let objValue = refMap?.current[item.key]?.getData() // 通过ref 数组 取值
      data.push(objValue)
    })
    console.log(data)
  }

  return <div className="testUseRefPage">
    <div>使用useRef数组的方式遍历组件并通过ref取值</div>
    //需要遍历的组件 并通过ref 赋值
    {
      mapList.map((item,index) => <AddCom key={index} num={index} ref={f => { refMap.current[item.key] = f }} />)
    }
    <Button type="primary" onClick={getData}>获取各组件的值</Button>
  </div>
}

export default Index

子组件

import React, { forwardRef, useEffect, useState, useImperativeHandle } from 'react'
import { Button, Upload } from 'antd'


const Index = (props: any, ref) => {
  const [value, setValue] = useState(12)
  const { num } = props

  const getData = () => {
    return value + num
  }
// 抛出给父组件的方法
  useImperativeHandle(ref, () => ({ getData }))

  return <div className="addComponent">
    add组件
  </div>
}

const IndexPage = forwardRef(Index)

export default IndexPage

我只写了hooks的方式，而这只是一种较为简单，容易理解的一种，我相信还有很多方法的。
class组件的方式可以直接使用this.refs 操作拿到遍历的子组件的值，但是react已经不建议这种写法了。我们可以按照以上hooks的原理对class组件进去遍历组件取值的。