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

Question

我试图获取在父视图组件内的地图中呈现的卡片组件的 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。我需要知道的是，当我滚动浏览父视图时，我需要使用当前在 View Port 中的 ChildComponent 的 id 更新状态 idList。

我不知道如何在 React JS 中实现这一点。

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

标签： javascriptreactjsviewport