Css 显示：none不会释放firefox中的空间

我正在使用react.js显示一些数据。我有不止一个div，一个比另一个低。每个div都包含从chart.js创建的图形。我在每个div中都有一个按钮来显示或隐藏特定的图表。它工作得很好。但当我隐藏图表时，我的firefox仍然无法释放图表显示时占用的空间。就像我隐藏图表时，在两个div之间创建空间一样。该代码在Microsoft Edge browser中正常工作。 这是我的密码：

var Div= React.createClass({

    getInitialState: function () {
        return {
            displayChart: false
        };
    },

    chartClick: function () {
        this.setState({
            displayChart: !this.state.displayChart,
        });
    },

    render: function() {

        return (
            <div>
                <p className="text-justify">
                    { this.props.detail }
                </p>

                <button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>

                { this.state.displayChart ?
                    <ChartGraph id={this.props.id} />
                : null }
            </div>
        );
    }

});

图表组件为：

ChartGraph = React.createClass({

    onLoad: function () {
        var barChartData = {
            labels: [ option1, option2 ],
            datasets: [
                {
                    data: [451, 145],
                    fillColor: "rgba(46,145,202,0.8)",
                    strokeColor: "rgba(46,145,202,0.8)",
                    highlightFill: "rgba(46,145,202,1)",
                    highlightStroke: "rgba(46,145,202,1)"
                }
            ]
        };

        var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
        new Chart(ctx).HorizontalBar(barChartData, {
            scaleGridLineWidth: 1,
            scaleShowGridLines: false,
            scaleStartValue : 0
        });
    },

    componentDidMount: function() {
        this.onLoad();
    },

    render: function () {

        return (
            <div className="red">
                <canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
            </div>
        );
    }

});

对这个问题有什么帮助吗？ 谢谢..

这应该行得通

    var Div= React.createClass({

        getInitialState: function () {
            return {
                displayChart: false
            };
        },

        chartClick: function () {
            this.setState({
                displayChart: !this.state.displayChart,
            });
        },

        render: function() {
            var hideChart = this.state.displayChart ? false : true;
            return (
                <div>
                    <p className="text-justify">
                        { this.props.detail }
                    </p>

                    <button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>

                    <ChartGraph id={this.props.id} hide={hideChart} />
                </div>
            );
        }

    });

及

---

请把你的护照寄出去。对不起，先生。。我试过了。但它也不起作用。该脚本正在Microsoft Edge和google chrome上运行。Mozilla带来了一些问题。

    ChartGraph = React.createClass({

        onLoad: function () {
            var barChartData = {
                labels: [ option1, option2 ],
                datasets: [
                    {
                        data: [451, 145],
                        fillColor: "rgba(46,145,202,0.8)",
                        strokeColor: "rgba(46,145,202,0.8)",
                        highlightFill: "rgba(46,145,202,1)",
                        highlightStroke: "rgba(46,145,202,1)"
                    }
                ]
            };

            var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
            new Chart(ctx).HorizontalBar(barChartData, {
                scaleGridLineWidth: 1,
                scaleShowGridLines: false,
                scaleStartValue : 0
            });
        },

        componentDidMount: function() {
            this.onLoad();
        },

        render: function () {
            if (this.props.hide) return null;
            return (
                <div className="red">
                    <canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
                </div>
            );
        }

    });