javascript - React-Bootstrap 模态渲染两次

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。