React-Bootstrap Modales Problem?

Question

Ich verwendete React-Bootstrap Modal und verstehe nicht, warum Foo-Komponente zweimal rendern?

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

Sieht aus wie Bootstrap modalen Zustand einstellt, wenn die modale eintritt (auch wenn zeigen zunächst auf true gesetzt ist, wie Sie oben haben). Bitte sehen Sie https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L202-L209. Daher würde ein Render erneut ausgelöst werden, wodurch Foo zweimal rendern würde.

EDIT: Sie müssen tatsächlich den ganzen Weg zurück zu React-Transition-Gruppe gehen, um zu verstehen, warum die onEntering-Funktion tatsächlich aufgerufen wird. https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L192. Auf componentDidMount wird this.updateStatus aufgerufen, der schließlich onEntering aufruft.