렌더링하기 전에 virtualDOM에서 상위 노드에 액세스 | ReactJS

Question

상위 요소에 따라 구성 요소 크기를 설정해야합니다. 그것이 렌더링되기 전에 virtualDOM으로부터 ref에 의해 부모의 폭과 높이를 얻을 수 있습니까?

부모

export default class App extends React.Component { 
 
    render() { 
 

 
    return (
 
     <div> 
 
     <div className={'avocado-container'} ref={(container) => { this.container = container; }}> 
 
      <Resizer parent={this} scrollAxis={'y'}> 
 
      </Resizer> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

나는 아이의 생성자에서 크기를 얻을 필요가있다.

this.refs.container.offsetWidth과 같은 것이 가능합니까?

Answer 1

No. 레이아웃 크기는 가상 DOM이 아닌 브라우저에 의해 계산됩니다. 손으로 크기를 설정하거나 CSS를 사용하여 하위 구성 요소의 폭과 높이를 채 웁니다. componentDidMount에 렌더링 된 구성 요소의 너비와 높이를 읽고 거기에 setState을 호출하면 이상적이지 않고 두 번째 렌더링이 발생하지만 때로는 수행해야 할 수도 있습니다.