顯示：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> 
      ); 
     } 

    });