显示：none没有释放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> 
      ); 
     } 

    });