Обновление состояния в компоненте React.js оставляет пустое пространство под моей страницей

Question

У меня есть компонент React.js, который отображает список элементов при загрузке страницы, но этот список можно обновить с помощью фильтра, который удалит определенные элементы из списка и сохранит измененный список в состоянии компонента. Мне удалось заставить эту функциональность работать, поэтому состояние обновляется корректно.

В то время как элементы получают правильную повторную сотню, меньше места используется, когда меньше элементов. Когда это происходит, высота страницы не уменьшается, чтобы приспособиться к новому размеру, занимаемому страницей, и оставляет пустой контент под моим нижним колонтитулом, который является последним элементом моей страницы.

Редактировать:

Я немного больше посмотрел на это и думаю, что React.js не может быть причиной моей проблемы. Я вызываю функцию, которая использует плагины jQuery imagesLoaded и Wookmark после каждого обновления состояния компонента, и похоже, что вызов этой функции после каждого изменения состояния не работает должным образом. Есть ли что-то, что я должен изменить в вызываемой функции, или я должен вызвать функцию в другой момент времени?

var ActivityListClass = React.createClass({
loggedInUser: {},
componentDidUpdate: function() {
    activityListImageResponsiveness(); // This is the function
},
componentDidMount: function() {
    var theActivityList = this;
    var activitiesGetListener = postal.subscribe({
        channel: "activities",
        topic: "list",
        callback: function(data, envelope) {
            var dataClone = $.extend(true, {}, data);
            dataClone.activities.shift();
            theActivityList.setState({data: dataClone.activities});
            theActivityList.loggedInUser = dataClone.loggedInUser;
        }
    });
},
getInitialState: function() {
    return {data: []};
},
render: function() {
    var i = 0;
    var activityNodes = this.state.data.map(function(activity) {
        var currentId = i;
        i++;
        return (
            <ActivityClass key={currentId} data={activity} />
        );
    });
    return (
        <section id="listArticles">
            {activityNodes}
        </section>
    );
}
});

И вызываемая функция определяется так:

function activityListImageResponsiveness() {
    $('#listArticles').imagesLoaded(function() {
        // Get a reference to your grid items.
        var $handler = $('#listArticles article');

        $handler.on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
            if(event.originalEvent.propertyName == 'top'){
                $('#listArticles').trigger("refreshWookmark");
            }
        });

        // Prepare layout options.
        var options = {
            align: 'left',
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#listArticles'), // Optional, used for some extra CSS styling
            direction: 'left',
            fillEmptySpace: true, // Optional, fill the bottom of each column with widths of flexible height
            flexibleWidth: '16.635%',
            itemWidth: $handler.width(), // Optional, the width of a grid item
            offset: 42, // Optional, the distance between grid items
            verticalOffset: 15
        };

        var $window = $(window);
        $window.resize(function() {
            var windowWidth = $window.width(),
            newOptions = {
                flexibleWidth: '16.635%',
                itemWidth: 208
                };

            // NOTE: These values are the same as the "media queries" of the CSS file.
            if(windowWidth >= 1263){
                newOptions.flexibleWidth = '16.635%';
                newOptions.itemWidth = 208;
            } else if (windowWidth >= 1132){
                newOptions.flexibleWidth = '21.05263157894737%';
                newOptions.itemWidth = 236;
            }else if(windowWidth >= 1014){
                newOptions.flexibleWidth = '20.71713147410359%';
                newOptions.itemWidth = 208;
            }else if(windowWidth >= 852){
                newOptions.flexibleWidth = '27.99525504151839%';
                newOptions.itemWidth = 236;
            }else if(windowWidth >= 764){
                newOptions.flexibleWidth = '27.51322751322751%';
                newOptions.itemWidth = 208;
            }else if(windowWidth >= 626){
                newOptions.flexibleWidth = '42.58064516129032%';
                newOptions.itemWidth = 264;
            }else if(windowWidth >= 515){
                newOptions.flexibleWidth = '40.7843137254902%';
                newOptions.itemWidth = 208;
            }else{
                newOptions.flexibleWidth = '83.80952380952381%';
                newOptions.itemWidth = 264;
            }

        $handler.wookmark(newOptions);
    });
    // Call the layout function.
    $handler.wookmark(options);
    });
}

Answer 1

Я обнаружил, что Wookmark оставляет невидимые элементы div в разделе listArticles, который содержит мои визуализированные элементы, что объясняет, почему в нижней части моей страницы было странное пустое пространство. Я попытался удалить все эти div перед каждым рендерингом с помощью $("#listArticles .wookmark-placeholder"). Remove(); Похоже, это работает, но рендеринг компонента немного медленнее.

Для этого я добавил функцию componentWillUpdate в свой компонент React:

componentWillUpdate: function() {
    $("#listArticles .wookmark-placeholder").remove();
},