[英]Updating state in React.js component leaves blank space under my page
我有一個React.js組件,該組件在頁面加載時呈現元素列表,但是可以使用過濾器更新此列表,該過濾器將從列表中刪除某些元素,並將修改后的列表保存在組件狀態下。 我設法使此功能起作用,因此狀態已正確更新。
盡管可以正確地重新渲染元素,但是當更少的元素被渲染時,可以使用更少的空間。 發生這種情況時,頁面的高度不會縮小以適應該頁面占用的新大小,並且在我的頁腳(這是頁面的最后一個元素)下留下空白內容。
編輯:
我對此進行了更多研究,我認為React.js可能不是造成我問題的原因。 每次更新組件狀態后,我都會調用一個使用imagesLoaded和Wookmark jQuery插件的函數,並且看起來在每次狀態更改均無法正常工作后調用此函數。 我應該在被調用函數中進行更改還是在其他時間調用該函數?
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);
});
}
我發現Wookmark在包含渲染元素的listArticles部分中留下了不可見的div,這解釋了為什么我在頁面底部有一個奇怪的空白空間。 我嘗試在每個渲染之前用$(“#listArticles .wookmark-placeholder”)。remove();刪除所有這些div。 看起來好像可以正常工作,但是組件的渲染要慢一些。
為此,我向我的React組件添加了componentWillUpdate函數:
componentWillUpdate: function() {
$("#listArticles .wookmark-placeholder").remove();
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.