Im changing the style of a component root div by browser resize. This triggers every single child to render also. Im in process of doing a complex map with many child components including tables and fb fixed table component.
The component has basicly 3 child tables one of them also gets the new width/height from the main component. All are in there own divs.
I just started with react a few days ago, hope someone can give me tips. Please let me know if something is unclear.
Resizing:
getInitialState: function() {
return {
windowWidth: window.innerWidth,
windowHeight: window.innerHeight
};
},
handleResize: function(e) {
this.setState({
windowWidth: window.innerWidth,
windowHeight: window.innerHeight
});
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
style object
var style = {
width: this.state.windowWidth,
height: this.state.windowHeight,
position: "absolute"
};
render()
return (
<div className="map_quadrant" ref="map_quadrant" style={style}>
...
<div className="column">
<div className="ui top attached segment">
<div className="ui top attached label">Current Selection Summary for {this.props.model._name}</div>
<SummaryTable model_name={this.props.model._name} model={this.props.model} keys={this.props.model.simpleSchema()._schemaKeys} />
</div>
</div>
<div>
<MasterTable width={this.state.windowWidth} height={this.state.windowHeight/2} model_name={this.props.model._name} data={this.state.model_data} keys={this.props.model.simpleSchema()._schemaKeys} />
</div>
(its experimental code, so definitely not optimal)