Question

我是React.js的初学者，遇到了问题。我试图在滚动图标上显示每个图标的时间稍有延迟。诸如此类的Example template。在此引导程序模板中，您可以看到何时滚动显示图标（每个图标稍有延迟）。它可能与jQuery滚动显示模块。但是我不知道如何用React.js实现这一点。无论如何，仅使用javascript在react.js中执行此操作？这是我的React功能组件代码。

import React from 'react';

function Howitworks() {
return (
    <div className="my-5">
        <div className="container text-center" id="contactContainer">
            <div className="row">
                <div className="col-lg-12 mx-auto">
                    <h2 className="text-center">How It Works</h2>
                    <hr className="my-4 thick-hr-2" />
                </div>
            </div>
        </div>
        <div className="container text-center">
            <div className="row">
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-home fa-4x icon-orange"></span>
                        <h3 className="my-3">Choose A Restaurant</h3>
                    </div>
                </div>
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-utensils fa-4x icon-orange"></span>
                        <h3 className="my-3">Choose A Tasty Dish</h3>
                    </div>
                </div>
                <div className="col-md-6 col-lg-4">
                    <div className="service-box mt-5 mx-auto">
                        <span className="fas fa-shipping-fast fa-4x icon-orange"></span>
                        <h3 className="my-3">Pick Up Or Delivery</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
}

export default Howitworks;

Answer 1

使用Intersection Observer来观察包含图标的div何时进入视口。 Intersection Observer是Vanilla JS，不需要任何外部模块或库，并且是为元素以滚动方式进入视口而构建的。

在这里，我将通过给容器div使其易于定位id：

    <div id="container-intersect" className="container text-center">
        ...
        ...
    </div>

然后我为IntersectionObserver创建一个配置对象：

// threshold controls how much of #container-intersect must 
// be in view before firing the callback function. A value 
// of 1.0 means that #container-intersect must be entirely 
// in view. A value of 0.5 means that #container-intersect 
// must be at least 50% in view.

var options = {
  root: document.querySelector('body'),
  rootMargin: '0',
  threshold: 1.0
}

然后我创建一个新的observer，当callback进入视口时，该函数将触发功能#container-intersect。

var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#container-intersect');
observer.observe(target);

callback在您的元素中起火和褪色。

var callback = function() { 
    let icons = document.querySelectorAll('.service-box span');
    icons.forEach(function(icon, index) {
        icons[index].style.opacity = '1';
    });
};

您可以将所有这些代码放置在组件的componentDidMount()生命周期函数中，如下所示：

function Howitworks() {
    componentDidMount() {
        var options = {
            root: document.querySelector('body'),
            rootMargin: '0',
            threshold: 1.0
        }

        var observer = new IntersectionObserver(callback, options);
        var target = document.querySelector('#container-intersect');
        observer.observe(target);

        var callback = function() { 
            let icons = document.querySelectorAll('.service-box span');
            icons.forEach(function(icon, index) {
                icons[index].style.opacity = '1';
            });
        };

    }

    render() {
        return (
            ...
            ...
        );
    }

Answer 2

您可以使用此lib检测组件在屏幕上可见。自由显示在屏幕上：https://github.com/fkhadra/react-on-screen 使用：

import React from 'react';
import TrackVisibility from 'react-on-screen';

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 */}
    );
}

在React.js中显示滚动图标

2 个答案: