0

我通过浏览器调整大小来更改组件根 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>

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

4

0 回答 0