当组件在视图中滚动时如何更改组件的状态？答案

【问题标题】：How to change state of a component when the component is scrolled in view?当组件在视图中滚动时如何更改组件的状态？
【发布时间】：2021-10-14 02:44:27
【问题描述】：

假设我的网络结构如下：

<Header />
<Component1 />
<Component2 />
<Component3 />
<Component4 />

每个组件的状态为 [component1Active, setComponent1Active] = useState(false)

现在，一开始 Component1 就在视野中。

我想要的是当component2在视图中滚动时，我想setComponent2Active = true和component1为false。

我尝试使用 useEffect，但它不起作用，因为加载期间所有组件的状态都设置为 true。

我正在使用功能组件

请帮助，任何建议将不胜感激。

提前致谢

【问题讨论】：

useEffect 应该用于那个，你能说明你是如何使用它的吗？

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

在 NPM 上有一个名为“react-in-viewport”的反应库 https://github.com/roderickhsiao/react-in-viewport 这是一个例子。

import handleViewport from 'react-in-viewport';

const Block = ({ inViewport, forwardedRef } ) => {
  const color = inViewport ? '#217ac0' : '#ff9800';
  const text = inViewport ? 'In viewport' : 'Not in viewport';
  return (
    <div className="viewport-block" ref={forwardedRef}>
      <h3>{ text }</h3>
      <div style={{ width: '400px', height: '300px', background: color }} />
    </div>
  );
};

const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);

const App= () => (
  <div>
    <div style={{ height: '100vh' }}>
      <h2>Scroll down to make component in viewport</h2>
    </div>
    <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
  </div>
)

使用const newComponent = handleViewport(<YourComponent/>)，您可以将任何组件创建为具有{inViewport, forwardedRef} 属性的组件，在组件的包含元素上将ref 属性设置为等于forwardRef，然后您可以使用inViewport 属性来确定是否就在眼前。您还可以使用handleViewport()创建的组件的onEnterViewport和onLeaveViewport属性来了解组件的可见性。

您可以通过任一 cli 命令将库添加到您的项目中

npm install --save react-in-viewport

yarn add react-in-viewport

您也可以通过在滚动事件上使用侦听器访问文档 DOM 并检查页面的 scrollHeight 并将其与每个组件的 scrollHeights 进行比较来自己执行此操作。使用该库使实现变得不那么令人头疼。

【讨论】：