[JavaScript知识库]react-on-screen:检查视口中是否有React组件

提供一个组件来包装react组件，并检查屏幕上是否可见。例如，可以使用此组件触发入口动画！

组件只是将isVisible属性?通过props传递给组件。

特征
不依赖于dom 节点。因此，它可以与无状态组件一起使用;
将所有属性转移到包装的组件里;
可见性可以只跟踪一次;
事件侦听器是通过节流实现的，以避免内存泄漏或性能问题.

安装

npm :

$ npm install react-on-screen --save 

样例:解构props的isVisible

import React from 'react';
import TrackVisibility from 'react-on-screen'; // CommonJs : require('react-on-screen').default


const ComponentToTrack = ({ isVisible }) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    };

    return <div style={style}>Hello</div>;
}

const YourApp = () => {
    return (
       {/* Some Stuff */}
        <TrackVisibility>
            <ComponentToTrack />
        </TrackVisibility>
       {/* Some Stuff */}
    );
}

Api