ReactJS如何仅在向下滚动并到达页面时才呈现组件? [英] ReactJS how to render a component only when scroll down and reach it on the page?

问题描述

我有一个反应组件 Data ，其中包括几个图表组件； BarChart LineChart ... etc.

I have a react component Data which includes several charts components; BarChart LineChart ...etc.

Data 组件开始呈现时，要花一些时间才能从API接收每个图表所需的数据，然后它开始响应并呈现所有图表组件.

When Data component starts rendering, it takes a while till receiving the data required for each chart from APIs, then it starts to respond and render all the charts components.

我需要的是，当我向下滚动并到达页面时，开始仅仅显示每个图表.

What I need is, to start rendering each chart only when I scroll down and reach it on the page.

有什么方法可以帮助我实现这一目标吗?

Is there any way could help me achieving this??

推荐答案

您至少有三种选择方法:

You have at least three options how to do that:

1. 跟踪组件是否在视口中(用户可见).然后渲染它.您可以使用此HOC https://github.com/roderickhsiao/react-in-viewport

使用 https:/明确跟踪"y"滚动位置/react-fns.netlify.com/docs/en/api.html#scroll

使用Intersection Observer API https:/编写自己的HOC/developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

Write your own HOC using Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

要渲染组件，您可能需要另一个HOC，它将根据其收到的道具返回Chart组件或"null".

To render component you may need another HOC, which will return Chart component or ‘null’ based on props it receives.

这篇关于ReactJS如何仅在向下滚动并到达页面时才呈现组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！