javascript - react - accessing DOM without breaking encapsulation -
is there cannonical way of going doing following without breaking encapsulation?
import react, { component, proptypes } 'react'; class dashboard extends component { constructor(props, context) { super(props, context); this.setref = ::this.setref; } componentdidmount() { const node = reactdom.finddomnode(this.someref); const newheight = window.innerheight - node.offsettop - 30; node.style.maxheight = `${newheight}px`; } render() { return ( <div id="some-element-id" ref={this.setref}> </div> ); } setref(ref) { this.someref= ref; } }
reactdom.finddomnode
seems suggested way of going this, still breaks encapsulation , documentation has big red flag extent.
you should use component "state" set style property of react element, access "real" dom node calculate height , update state, re-rendering component. react component has same information real dom node, shouldn't breaking encapsulation.
using vanilla js provide example:
var component = react.createclass({ getinitialstate: function(){ return { style: {}, } }, componentdidmount: function(){ var node = reactdom.finddomnode(this); var newheight = window.innerheight - node.offsettop - 30; this.setstate({style: {backgroundcolor: '#bbb', height: newheight.tostring() + 'px' }}); }, render: function(){ return react.createelement('div', {style: this.state.style}, 'height: ' + this.state.style.height); }, });
you can see running in this fiddle.
Comments
Post a Comment