当孩子改变时，父母的焦点丢失了

Question

我正在使div集中于其上监听keydown事件，并且我有一个这样的包装器：

class Wrapper extends react.Component {
  componentDidMount() {
    this.refs["profilebody"].focus();
    this.refs["profilebody"].addEventListener(
      "keydown",
      this.props.onOverlayKeyDown,
      false
    );
  }

  componentWillUnmount() {
    /// removing even listerner
  }

  render() {
    <div className="modal_container" tabIndex="-1" ref={"profilebody"}>
      {this.props.children}
    </div>;
  }
}

然后在父母那里说WrapperParent，我正在改变孩子。

class WrapperParent extends React.component {
  render() {
    return (
      <Wrapper>
        {{
          [`render-a`]: <A />,
          [`render-b`]: <B />
        }}
        [this.state.screen]}
      </Wrapper>
    );
  }
}

  

注意：子元素始终是一个React元素

问题是，每当我更改父母中的孩子时，焦点就会移到身体上，而不是停留在指定的div上。

如何使注意力集中在div上？