Question

我正在使用react.js来显示一些数据。我有一个div以下的一个chart.js。每个div都包含从div创建的图表。我在每个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> ); } });都有一个按钮来显示或隐藏该特定图表。它工作得很好。但是当我隐藏那个图形时，我的Firefox仍然没有释放图表在显示时占用的空间。就像我隐藏我的图表一样，空间在两个div之间创建。代码在Microsoft Edge浏览器中正常运行。这是我的代码：

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

});

图表组件是：

     [_datePicker setDatePickerMode:UIDatePickerModeDateAndTime];

对此问题有任何帮助吗？谢谢..

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

    });

display：none不会释放firefox中的空间

1 个答案: