React JS-获取当前可见的数组中的所有dom元素ID

Question

我试图获取在父视图组件内的地图中呈现的Card Component的ID。

我想做的是获取数组中所有可见卡的ID以进行api调用。

我不知道如何在React中做到这一点。任何帮助将不胜感激。

class ParentView extends Component {
   constructor(props) {
       super(props);
       this.state = {
          idList: [],
       }
   }
   componentDidMount() {
       this.props.getData();// Fetch necessary data and store in redux
   }
   render(){
      this.props.data.map((item, index)=>{
        <ChildComponent key={index} renderData={item}/>
      }
   }

}

在上面的代码片段中，当渲染时，它将我从0抓取到多达300多张卡片。在每行6张卡片的网格视图中呈现。

每张卡都有一个与之关联的ID。我需要知道的是，当我滚动浏览父视图时，我需要使用视图端口中当前使用的ChildComponent的ID更新状态idList。

我不知道如何在React JS中实现它。

我曾尝试使用https://www.npmjs.com/package/react-in-viewport，但无助于获取ChildComponent的ID。