Question

我通过浏览器调整大小来改变组件根div的样式。这会触发每个孩子也要渲染。我正在使用许多子组件（包括表和fb固定表组件）执行复杂的映射。

该组件基本上有3个子表，其中一个也从主组件获取新的宽度/高度。所有人都有自己的div。

我刚刚开始做出反应，希望有人可以给我提示。如果不清楚，请告诉我。

调整：

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

样式对象

    var style = {
        width: this.state.windowWidth,
        height: this.state.windowHeight,
        position: "absolute"
    };

渲染（）

    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>

（它的实验代码，所以绝对不是最佳的）

浏览器上的reactjs（+ meteor）调整大小更改样式但不重新呈现完整的子树

0 个答案: