Блог

У меня есть компонент 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 , сфокусированный ребенок размонтировался и снова монтировался. Дети в моем случае несут в себе множество состояний, которые я теряю каждый раз, когда один из детей сосредотачивается.

Я много читаю, но не могу понять, почему он перемонтирует весь компонент.