我有一个组件,Split
,它需要两个子元素。第一个子元素将显示在屏幕的左侧,第二个子元素将显示在右侧。如果屏幕宽度低于某个点,则只显示右侧,而左侧将从DOM中删除。
示例子元素可以是Sidebar
组件和Content
组件。对于移动设备,我不想显示菜单,但有一个特殊的移动菜单,我会弹出它。
我的问题是:如何在不卸载并重新挂载Content
组件的情况下删除Sidebar
组件?
我的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}
有没有合理的方法解决这个问题?