reactjs - 无需卸载即可动态响应布局子项

Question

我有一个 React 组件，用于根据其子项的键对其进行布局。这是它的样子：

<Container focusedChildKey={this.state.focusedChildKey}>
  <Child key="child1" />
  <Child key="child2" />
  <Child key="child3" />
</Container>

在容器中，在render函数中我做了一些简单的事情：

let focused = null;
let normals = [];

React.Children.forEach(children, (child) => {
  if (child.key === this.props.focusedChildKey) {
    focused = child
  } else {
    normals.push(child);
  }
});

return (
  <div>
   <div className="focusedChild", style={{ ... }}>
     {focused}
   </div>
   {normals}
  </div>
);

我遇到的问题是，每当focusedChildKey道具改变时Container，专注的孩子就会被卸载并再次安装。就我而言，孩子们有很多状态，每次孩子集中注意力时我都会失去这些状态。

我读了很多书，但不明白为什么要重新安装整个组件。

标签： reactjslayoutchildren