在弹出窗口内容更改后，React Bootstrap OverlayTrigger不会重新排列

Question

使用OverlayTrigger刷新Popover的内容时遇到问题。基本上，我所期望的是，如果内容发生变化，OverlayTrigger会重新排列其位置。但事实并非如此。

鉴于以下代码，可以在此处看到：https://codesandbox.io/s/W6pDkDoyW

import React from 'react';
import { render } from 'react-dom';
import { Popover, OverlayTrigger } from 'react-bootstrap';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      names: ['george'],
    };
    this.loadMore = this.loadMore.bind(this);
    this.setOld = this.setOld.bind(this);
  }

  loadMore() {
    const _this = this;
    setTimeout(() => {
      _this.setState({ names: ['george', 'steve', 'peter'] });
    }, 500);
  }

  setOld() {
    this.setState({ names: ['george'] });
  }

  render() {
    const popover = (
      <Popover id="test-popover">
        {this.state.names.map((n, index) =>
          <p key={index}>
            {n}
          </p>,
        )}
      </Popover>
    );

    return (
      <OverlayTrigger
        trigger={['hover', 'focus']}
        placement="top"
        overlay={popover}
        onEnter={this.loadMore}
        onExit={this.setOld}
      >
        <span>This is a div</span>
      </OverlayTrigger>
    );
  }
}

const Container = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '24em',
      }}
    >
      <div style={{ maxWidth: '50%' }}>
        <App />
      </div>
    </div>
  );
};

render(<Container />, document.getElementById('root'));

这可能与否？