React Bootstrap-modalen Komponenten dupliziert

Question

Aus irgendeinem Grund die modale mehr als ein Mal wiedergegeben wird, manchmal 2 oder 3. Dann, nach ein paar Sekunden die aditionals modals automatisch entfernt werden.

Die modal durch eine Strecke geöffnet ist, so somethig wie dies ich tue:

const ModalWrapper = (props) => { 
    return (
    <Modal 
     show={props.showModal} 
     onHide={props.hide} 
    > 
    ... 
    </Modal> 
); 
}; 

class ComponentPage extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     showModal: true, 
    }; 
    } 

    @autobind 
    closeModal() { 
    this.props.history.goBack(); 
    this.setState({showModal: false}); 
    } 

    render() { 
    return (
     <ModalWrapper 
     {...this.state} 
     hide={this.closeModal} 
     /> 
    ); 
    } 
} 

Answer 1

Normalerweise ist dies geschieht, wenn die Modal ist innerhalb einer Umhüllung, zum Beispiel:

const ChildrenWrapper = ({children}) => { 
    return <div>{children}</div> 
} 

Und die modal ist ein Kind in der Verpackung:

const ModalWrapped= ({}) => { 
return <ChildrenWrapper> 
      <Modal show={true}>some content</Modal> 
     </ChildrenWrapper> 
} 

als App:

const App =() => { 
    return <ModalWrapped/> 
} 

Das Ergebnis ist, dass die Instanz der Modal 2 mal in dem virtuellen dom gerendert wird.

Answer 2

ich das gleiche Problem, und ich öffnete auf GitHub ein Problem aufgetreten: https://github.com/react-bootstrap/react-bootstrap/issues/2730