React-Bootstrap Modal渲染兩次

Question

我使用了React-Bootstrap Modal，但不明白為什么Foo組件渲染兩次？

import { Modal, Button } from 'react-bootstrap';

const Foo = (props) => {
  console.log(‘a’);
  return(
    <div>foo</div>
  )
}

class Example extends Component {
  render() {
    return(
      <Modal show={true}>
        <Foo />
      </Modal>
    )
  }
}

Answer 1

進入模態時，Bootstrap模態集看起來像狀態（即使show最初像上面一樣設置為true）。 請參閱https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L202-L209 。 因此，將再次觸發渲染，從而使Foo渲染兩次。

編輯：實際上，您必須完全回到React-transition-group，以了解為什么實際上會調用onEntering函數。 https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L192 。 在componentDidMount上，調用this.updateStatus，最終調用onEntering。