我有一個組件,Split
,需要兩個孩子。第一個孩子將顯示在右側第二個孩子的屏幕&的左側。如果屏幕寬度低於某個點,則只顯示右側,左側將從DOM中刪除。反應:防止父母重新申請時重新裝入
示例兒童可能是Sidebar
組件和Content
組件。對於移動設備,我不想顯示菜單,但有一個特殊的移動菜單,我彈出。
我的問題是:我如何刪除Sidebar
組件而不卸載&組件也重新安裝Content
組件?
我的Content
組件獲取componentDidMount
上的數據,我不希望它再次重新讀取或重新掛載(從而丟棄用戶輸入)。
基本上我有這樣的事情:
<Split>
<Sidebar/>
<Content/>
</Split>
而且Split
的渲染方法看起來是這樣的:
let children;
let firstChild = this.props.children[0];
let lastChild = this.props.children.pop();
if (this.state.responsive === 'singleColumn') {
children = (
<div>
<div style={{display: 'none'}}>{firstChild}</div>
{lastChild}
</div>
);
} else {
children = (
<div>
{firstChild}
{lastChild}
</div>
);
}
return (
<div>
{children}
</div>
);
即使{lastChild}總是呈現,不管是什麼,它每次拆分必須重新渲染時仍然會卸載並重新加載!
即使有渲染,看起來像這樣:
return (
<div>
{this.props.children.pop()}
</div>
);
使最後一個孩子(這永遠不會改變)將要卸載&渲染之前重新安裝。
如果我不是修改Split
並通過該組件,將永遠是在DOM中像這樣的屬性:
<Split staticComponent={<Content />}>
<Sidebar />
</Split>
它工作正常。那麼爲什麼它不工作,當我剛剛彈出像這樣的最後一個孩子{this.props.children.pop()}
而不是這個{this.props.staticComponent}
有沒有一種理智的方法來解決這個問題?
我明白你的意思,因此刪除,你有沒有嘗試過在這裏使用CSS?這是更多的問題,沒有?在某個屏幕尺寸下,您需要更改爲要顯示的該子項的樣式:none ..hope可以幫助 – JordanHendrix
查看本文,大概半程下來,他們會根據屏幕大小執行類似的操作 https:// medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.wew0pfsyh – JordanHendrix
嗯,事情是,斯普利特來自一個圖書館,它真的很好,完美的作品,沒有寫任何CSS,除了這個問題。所以純粹的CSS解決方案並不是我想要的。我希望React移動{lastChild}組件,而不是移除並將其插入DOM。 –