我几乎是按官方案例copy过来的，但是首屏渲染后，再滑动就不加载了，这是为什么啊，不知道是哪里属性没设置对。
有时候又莫名其妙的，滑动一下把后面的都加载了...求救

import React from "react";
import LazyLoad from 'react-lazyload';
import Lazyloading from '../Lazyloading/index';
import Placeholder from '../Lazyloading/Placeholder';

class Griddoubt extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    };
    render() {
        const data = this.props.data;
        //[{once: false, id: "http://39.107.0.png", count: 1},]
        return (
            <div>
                {data.map((el, index) => {
                    return (
                        <LazyLoad
                            once={el.once}
                            key={index}
                            height={200}
                            offset={[100, 0]}
                            placeholder={<Placeholder />} //loading
                            debounce={500}
                        >
                            <Lazyloading once={el.once} id={el.icon} count={index + 1} />
                        </LazyLoad>
                    );
                })}
            </div>
        );
    }
}

export default Griddoubt;


import React from "react";

class Lazyloading extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: true,
            count: 1,
        };
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.id !== this.props.id && this.props.id) {
            this.setState({
                isReady: false
            });

            setTimeout(() => {
                this.setState({
                    isReady: true,
                    count: this.state.count + 1
                });
            }, 500);
        } else {
            this.setState({
                isReady: true
            });
        }
    }

    render() {
        console.log(this.props);//首屏渲染后，再滑动就执行不到这了
        return this.state.isReady ? (
            <div className="" style={{ height: '234PX', width: '50%', float: 'left', background: 'rgb(133, 138, 223)', textAlign: 'center', }}>
                {this.props.once ? (
                    <div >
                        加载失败
                    </div>
                ) : (
                        <div >
                            加载成功
                        </div>
                    )}
            </div>
        ) : (
                <div >
                    loading...
                </div>
            );
    }
}

export default Lazyloading;

import React from 'react';

export default function Placeholder() {
    return (
        <div style={{ height: '234PX', width: '50%', float: 'left', background: 'rgb(229, 142, 196)', textAlign: 'center' }}>
            <img src="http://39.107./1.png"
                style={{ width: '50% ' }}
            />
        </div>
    );
}