>

자식 구성 요소를 렌더링하기 전에 구성 요소의 너비를 계산해야합니다.

그러나 문제는 하위 구성 요소에 필요한 너비를 얻을 수 있도록 구성 요소를 먼저 렌더링해야한다는 것입니다.

즉, 메인 컴포넌트에서 렌더링이 완료된 후 하위 컴포넌트를 추가해야합니다.

와이즈 위즈는 이 작업을 수행하는 것이 가장 좋습니다.

이것은 코드 예제입니다

componetnDidMount()

/** * @returns void */ componentDidMount() { let width = this.seatMap.offsetWidth; // I want to add component here <LeafletMap width={width}/> } /** * @returns {XML} */ render() { return ( <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }> // This is way how it is work at this moment <LeafletMap /> </div> ); }
  • 답변 # 1

    먼저 생성자에 상태 변수를 추가하십시오. 하나는 LeafletMap을 렌더링 할 준비가되었는지 확인하기위한 것이고 다른 하나는 proplet으로 전달되는 LeafletMap의 너비를 나타냅니다.

    constructor(props) {
        super(props);
        this.state = {
            widthLeafletMap: null
            displayLeafletMap: false
        };
    }
    
    

    그럼 componentDidMount 에서  메소드, 이제 두 상태 변수를 업데이트하여 LeafletMap 의 너비를 알면 부모 구성 요소를 다시 렌더링하십시오.  표시 될 준비가되었습니다 :

    componentDidMount()
    {
        let width = this.seatMap.offsetWidth;
        this.setState({
            widthLeafletMap: width,
            displayLeafletMap: true
        });
    }
    
    

    마침내 render() 를 업데이트하십시오  원하는 너비로 표시 할 준비가되었을 때 LeafletMap 컴포넌트를 표시하는 방법 ( displayLeafletMap 만 해당)   true 입니다 , 원하는 너비로 표시됩니다) :

    render() {
        let displayLeafletMap = this.state.displayLeafletMap;
        let widthLeafletMap = this.state.widthLeafletMap;
        return (
            <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
                {displayLeafletMap && (
                    <div className="row">
                        <LeafletMap width={widthLeafletMap} />
                    </div>
                )}
            </div>
        );
    }
    
    

  • 답변 # 2

    componentDidMount에서 상태를 설정하고 렌더에서 상태를 확인하여 컴포넌트가 마운트되고 상태가 설정된 경우에만 반환 할 수 있습니다.

    /**
     * @returns void
     */
    ... define state in constructor ...
    componentDidMount()
    {
        let width = this.seatMap.offsetWidth;
        // set state here
        this.setState({seatMapWidth: width});
    }
    /**
     * @returns {XML}
     */
    render() {
    //add condition here to control your return 
      const {seatMapWidth} = this.state;
      if(seatMapWidth !== null){
       // if this state is not null so return your component
         return <LeafletMap width={seatMapWidth}/> 
    }
       return (
            <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
                // This is way how it is work at this moment
                <LeafletMap />
                </div>
        );
    }
    
    

관련 자료

  • 이전 Prometheus PushGateway 비활성 인스턴스 데이터 정리
  • 다음 python - tensorflow 그래프로 저장된 Keras Sequential 모델에 열차 운행이 누락 되었습니까?