반응 부트 스트랩 모달, 하위 구성 요소를 처리하는 방법?

Question

문서의 예제 코드를 기반으로 한 모달을 사용하고 있습니다 : https://react-bootstrap.github.io/components.html#modals-live. 내가 원하는 것은 자식 컴포넌트가 1) 데이터 준비가되어 있고, 2) 모달이 열렸을 때만 렌더되도록하는 것이다. 또한 하위 구성 요소는 작업 영역이 얼마나 넓은지를 알아야합니다 (내부에 일부 d3.js svg 드로잉을하기 때문에).

나는 fixed-data-table를 사용하여, BTW, 또한, 그래서 데이터 (A concept는) 상태로 전환되고 모델이 행 클릭에 열립니다 : 모덜 문서의 예를 당으로

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

, 모달 렌더링에 거기에 앉아 DOM을 열 때까지 닫힌 상태로 DOM에 존재합니다. 그러나 Modal.Body는 Modal이 열릴 때까지 존재하지 않는 것 같습니다. 나의 밝은 생각은 자식 인 ConceptDetail가 ref에서 해당 div를 포함하는 ClientWidth를 가져올 수 있다는 것입니다.

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> 

이 것 일, 심판은 하위 구성 요소가 렌더링 될 때까지 준비가되지 않았 제외. 무슨 일이 일어나고 있는지 파악하기 위해, 나는 이런 짓을 : 나는 행을 클릭하면, 내가 경고 경고 did update, width: 868 다음 will update, no modalBody ref, 다음 하위 구성 요소 표시를 참조

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'); 
    } 
} 

. 그러나 실제로는 componentDidUpdate 전에 렌더되기 때문에 아이가 너비 (또는 업데이트 된 참조)를 얻지 못했습니다. 처음에 경고를받는 이유는 모달이 애니메이션이며 렌더링시 즉시 나타나지 않기 때문입니다. 내가 모달을 닫을 때, 나는 실제로 빠른 플래시를 보았고, 마침내 정확한 너비를 받았다. 그러나 그 시점에서 나는 더 이상 필요하지 않다.

그래서, 가장 구체적으로, 제 질문은 : 모달의 하위 구성 요소가 모달 본문의 너비를 어떻게 알 수 있습니까? 누군가가 내가 일반적으로하는 일을 올바르게 수행하는 방법을 설명 할 수 있다면 더 감사 할 것입니다. 데이터 및 컨테이너 크기를 소품으로 받기를 원하는 하위 구성 요소가있는 모달 표시를 트리거합니다.

Answer 1

이 좋아, 그래서 내가 가고있어 부분적인 대답은 여기에 있습니다 :

<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> 

: 그 폭을 얻을 수있는 시간, 그래서 Trigger modal shown for React Bootstrap

그래서, onEntered는, 모달 모든 준비가 될 때까지 발생하지 않습니다 내 생각,

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>; 
} 

이 끔찍한하지 않고, 그것을 작동 :

그런 다음 별도의 방법 (준비 경우) 아이 컴퍼넌트를 얻을 수 있습니다. 누군가 그것을 구조화하는 더 좋은 방법을 안다면 나는 기쁜 마음으로 듣는다.

추가 : 작품의 정렬, 즉. 실제로 너비를 알아야하는 하위 구성 요소는 모달 본문에서 몇 단계 아래에 있으므로 직접 부모의 너비를 알아야합니다. grrr반응 구성 요소는 컨테이너 방향을 어떻게 알 수 있습니까 ??