在 React.js 中顯示滾動圖標

Question

我是 React.js 的初學者，遇到了問題。 我試圖在滾動時顯示圖標，每個圖標都有一點延遲。 類似於那個Example template 的東西。 在這個引導模板中，您可以看到當我們滾動圖標時會顯示（每個圖標都有一點延遲）。 它可能與 jquery 滾動顯示模塊。 但我不知道如何用 React.js 實現這一點。 有沒有辦法在 react.js 中只使用 javascript 來做到這一點？ 這是我的反應功能組件代碼。

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，不需要任何外部模塊或庫，並且是為元素在滾動時進入視口而構建的。

在這里，我將通過給它一個id使容器div易於定位：

    <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 ，當#container-intersect進入視口時觸發函數callback 。

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 react-on-screen： 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 */}
    );
}