CODEWITHSUNDEEP
javascriptreactjsjsxvirtual-dom
Honza Václavík
Honza Václavík

Reputation: 31

Access parent node from virtualDOM before it renders | ReactJS

I need to set component dimensions depending on parent element. Is it possible to get width and height of parent by ref from virtualDOM before it renders?

Parent 

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

I need to get the dimensions in constructor of child.

Is is possible with something like this.refs.container.offsetWidth ?

Upvotes: 0

Views: 750

Answers (1)

Andy Ray
Andy Ray

Reputation: 32076

No. Layout dimensions are calculated by the browser, not the Virtual DOM. Either set the dimensions by hand, or use CSS to make your child component fill width and height. You can also read the width and height from the rendered component in componentDidMount and call setState in there, which isn't ideal and will cause a second render, but sometimes needs to be done.

Upvotes: 0

Related Questions