reactjs (+meteor) on browser resize change style but not rerender complete childs tree

162 Views Asked by At

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)

0

There are 0 best solutions below