react-highcharts：更改选项卡时画布大小会更改

Description

我在“进度”选项卡中有一个Highcharts折线图（该选项卡是react-bootstrap Tab） . 当我打开“进度”选项卡时，图表显示为100％宽度，这很好 . 当我切换到另一个选项卡，然后返回“进度”选项卡时，图表的宽度从100％变为固定的600px . 我浏览了官方的Highcharts和React-Highcharts的文档，但找不到解决方案 .

我想重新渲染组件时会出现问题 .

Code

highchart-line.js：

export default class HighChartLine extends Component {
    constructor(props) {
        super(props);
        this.state = { config: undefined };  // or use null
    }

    getScoreData(eqId){

        const self = this;
        let url = 'src/data/dermatology/user_scores-eq' + eqId + ".json";
        axios.get(url)
            .then((response) => {
                ... //response informs
                let config = {...};

                self.setState({ config: config });
            });
    }

    componentWillMount(){
        this.getScoreData(this.props.equation.eqId);
    }
    componentWillReceiveProps(nextProps){
        this.getScoreData(nextProps.equation.eqId);
    }

    render(){
    // Handle case where the response is not here yet
    if ( !this.state.config ) {
        return <div>Loading...</div>
    }

    if ( this.state.config.length === 0 ) {
        return <div>Sorry, no data was found for this equation.</div>;
    }  return (
            <ReactHighcharts config={this.state.config}  />
        )
    }
}

highchart-line被导入progress-tab.js：

const ProgressTab = ({equation, user}) => {
    return(
            <HighChartLine equation={equation} user={user} />
  )
}; export default ProgressTab;

progress-tab被导入modal-main.js：

export default class ModalMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabKey: this.props.tabKey
        };
    }
    handleSelect = (tabKey) => {
        this.setState({ tabKey: tabKey });
    };
    render() {
        return (
            <Tabs activeKey={this.state.tabKey}
                        onSelect={this.handleSelect}
            >
                <Tab tabClassName="main-tab" eventKey={"progress"} >
                    <ProgressTab {...this.props} />
                </Tab>
                <Tab tabClassName="main-tab" eventKey={"peer-compare"}>
                    <PeerCompareTab {...this.props}/>
                </Tab>
            </Tabs>
        )
    }
}

Browser render

宽度正确设置为100％

宽度自身更改为600px