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

貌似引導模式設置狀態下，當模式進入（即使顯示初始設置爲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。