Reagieren-Bootstrap modal, wie Kind-Komponente zu behandeln?

Question

Ich verwende ein Modal basierend auf dem Beispielcode aus der Dokumentation: https://react-bootstrap.github.io/components.html#modals-live. Ich möchte, dass eine untergeordnete Komponente nur gerendert wird, wenn 1) ihre Daten bereit sind und 2) wenn das Modal geöffnet ist. Außerdem muss die untergeordnete Komponente wissen, wie groß der Bereich ist, mit dem sie arbeiten muss (weil sie einige d3.js-svg-Zeichnungen ausführt).

Ich bin auch, btw, mit fixed-data-table, so dass die Daten (a concept) in Zustand versetzt und das Modell wird auf Zeile klicken geöffnet:

onRowClick={(evt, idx, obj)=>{ 
    let concept = filteredDataList.getObjectAt(idx); 
    this.openModal(); 
    this.setState({concept}); 
}} 

Gemäß dem Modal docs Beispiel der Modal sitzt dort im Render und existiert im DOM in einem geschlossenen Zustand, bis etwas ihn öffnet. Der Modal.Body scheint jedoch nicht zu existieren, bis das Modal offen ist. Meine gute Idee ist, dass das Kind, ConceptDetail, die ClientWidth von einer Referenz zu seinem enthaltenden div bekommen kann.

let conceptDetail = ''; 
if (this.state.concept) { 
    conceptDetail = <ConceptDetail 
         containerRefs={this.refs} 
         concept={concept} />/ 
} 

<Modal> 
    ... 
    <Modal.Body> 
    <div ref="modalBody" style={{width:'100%'}}> 
     {conceptDetail} 
    </div> 
    </Modal.Body> 
    ... 
</Modal> 

Diese würde Arbeit, außer der Schiedsrichter ist nicht bereit, bis die untergeordnete Komponente gerendert wird. Um herauszufinden, was los ist, ich habe dies:

componentWillUpdate(){ 
    if (this.refs.modalBody) { 
    let { clientWidth } = this.refs.modalBody; 
    alert(`will update, width: ${clientWidth}`); 
    } else { 
    alert('will update, no modalBody ref'); 
    } 
} 
componentDidUpdate(){ 
    if (this.refs.modalBody) { 
    let { clientWidth } = this.refs.modalBody; 
    alert(`did update, width: ${clientWidth}`); 
    } else { 
    alert('did update, no modalBody ref'); 
    } 
} 

Wenn ich eine Zeile klicken, ich die Warnung will update, no modalBody ref sehen, gefolgt von dem Alarm did update, width: 868, und dann zeigt die untergeordnete Komponente. Aber das Kind bekam nicht die Breite (oder die aktualisierte Ref), weil es tatsächlich vor dem componentDidUpdate rendert. Der Grund, warum ich die Warnung zuerst sehe (ich nehme an) ist, weil das Modal animiert ist und nicht sofort beim Rendern erscheint. Wenn ich das Modal schließe, sehe ich tatsächlich für einen schnellen Blitz, dass es endlich die richtige Breite bekommen hat, aber an diesem Punkt brauche ich es nicht mehr.

Meine Frage lautet also: Wie kann eine Kindkomponente eines Modal über die Breite des Modalkörpers informiert werden? Ich würde sogar noch dankbar, wenn jemand den richtigen Weg erklären könnte, zu tun, was ich versuche im Allgemeinen zu tun: mit einer untergeordneten Komponente Trigger-Anzeige eines Modal, die möchten, um Daten und Behälterabmessungen als Requisiten erhalten.

Answer 1

Ok, also eine teilweise Antwort, die ich in Gang gekommen ist, hier: Trigger modal shown for React Bootstrap

So onEntered nicht abfeuert, bis die modal alle bereit ist, so dass die Zeit, um die Breite zu erhalten:

<Modal ... 
    onEntered={(() => { 
     let { clientWidth } = this.refs.modalBody; 
     if (this.state.modalWidth !== clientWidth) 
     this.setState({modalWidth:clientWidth}); 
    }).bind(this)}> 
... 
    <Modal.Body> 
    <div ref="modalBody"> 
     {this.getConceptDetail()} 
    </div> 
    </Modal.Body> 
... 
</Modal> 

Dann ein separates Verfahren, das Kind Komponente (wenn bereit) zu erhalten:

getConceptDetail() { 
    const {concept, modalWidth} = this.state; 
    if (concept && modalWidth) { 
    let conceptId = concept.records[0].rollupConceptId; 
    return <ConceptDetail 
       width={modalWidth} 
       concept={concept} 
       conceptId={conceptId}/>; 
    } 
    return <h3>no concept detail</h3>; 
} 

Dies ist nicht schrecklich, ich denke, und es funktioniert. Wenn jemand einen besseren Weg zur Strukturierung kennt, würde ich mich freuen zu hören.

Nachtrag: Art der Arbeiten, das ist. Die Kind-Komponente, die tatsächlich benötigt die Breite ein paar Stufen nach unten aus dem Modal Körper zu kennen, so dass er die Breite seiner direkt Eltern wissen muss ... grrrWie reagieren Komponenten sollten ihre Behälter Richtungen wissen ??