css - 显示 :none is not freeing up the space in firefox

Question

我正在使用 react.js 来显示一些数据。我有多个 div 一个在另一个下面。每个 div 包含图表，从 chart.js 创建。我在每个 div 中都有一个按钮来显示或隐藏该特定图表。它工作得很好。但是当我隐藏该图表时，我的 firefox 仍然没有释放图表在显示时占用的空间。就像我隐藏图表时一样，两个 div 之间会创建空间。该代码在 Microsoft Edge 浏览器中正常运行。这是我的代码:

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

});

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

Answer 1

这应该有效。

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

    });

和

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

    });