如果您尝试使用 jquery 插件，您可能会以与 React 呈现的 DOM 不同步的方式结束。同样在您的情况下，应该在EntriesList组件中调用延迟加载函数，而不是从其父级调用。

您可以使用一个非常简单的组件作为 react-lazy-load：

https://github.com/loktar00/react-lazy-load

或者只是从它的源代码中获取灵感来实现你自己的。

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <div className="entry list-group-item" key={entry.id}>

                    // lazy items video, image, iframe...
                    <LazyLoad>
                       <img src="1px.gif" datasource="/path/to/original" />
                       <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                    </LazyLoad>

                </div>
            );
        });

        return(<div>{entries}</div>);
    }
});

使用 npm 包react-lazy-load-image-component，你只需要包装你想要延迟加载的组件，<LazyLoadComponent>它就可以在没有任何其他配置的情况下工作。

import { LazyLoadComponent } from 'react-lazy-load-image-component';

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <LazyLoadComponent>
                    <div className="entry list-group-item" key={entry.id}>
                        // lazy items video, image, iframe...
                        <img src="1px.gif" className="lazy" />
                        <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                    </div>
                </LazyLoadComponent>
            );
        });

        return(<div>{entries}</div>);
    }
});


var App = React.createClass({
    componentDidMount: function() {
        $.get('/path/to/json', function(data) {
            this.setState({entryItems: data.entries});
        }.bind(this));

    },
    getInitialState: function() {
        return ({
            entryItems: []
        });
    },
    render: function() {
        return (<div><EntriesList items={this.state.entryItems} /></div>);
    }
});

React.render(<App />, document.getElementById('entries'));

免责声明：我是该软件包的作者。

尝试检查滚动事件到您的 div 父容器（您在 App 类上呈现的 div：

var App = React.createClass({
    componentDidMount: function() {
        $.get('/path/to/json', function(data) {
            this.setState({entryItems: data.entries});
        }.bind(this));
    },

    myLazyLoad: function(e) {
        // here do actions that you need: load new content, do ajax request, ...
        // example: check you scrolling and load new content from page 1, 2, 3 ... N
        var self = this;
        $.get('path/to/json/?page=N', function(data) {
            self.setState({entryItems: data.entries});
        });
    },

    getInitialState: function() {
        return ({
            entryItems: []
        });
    },
    render: function() {
        return (<div onScroll={this.myLazyLoad}><EntriesList items={this.state.entryItems} /></div>);
    }
});

延迟加载react

组件可以在其消费者不知道使用高阶函数的情况下延迟加载依赖项，或者消费者可以在其子代不知道的情况下延迟加载其子代，该组件使用带有函数和module集合的组件，或两者的某种组合。

https://webpack.js.org/guides/lazy-load-react/