作出反應條件顯示自舉，保持佈局機智

我使用的反應，引導工作的一個項目。我有一個大的條形圖和2個小盒子，都需要水平放置在一起。作出反應條件顯示自舉，保持佈局機智

下面是它如何工作..拓展筆窗口看到他們水平坐在一起（正確的方法）：

https://codesandbox.io/s/lO9rvrBYM

不過，我需要一些有條件的呈現邏輯在那裏的情況下，沒有數據，我不想顯示大的條形圖。檢查出在這裏：

https://codesandbox.io/s/ELLzLo3g

在這個例子中使用的條件使其不再能正確定位的元素。他們永遠坐在另一個之上。

我認爲這與線69.我需要呈現少了一個閉合</div>該圖形保持在機智的水平佈局做，但拋出一個語法錯誤。

中的任何人引導偉大的有什麼祕訣來解決這個問題？

來源

2017-08-07 fromspace

首先，你的問題&樣品不是你想達到什麼說清楚，所以我的答案可能是缺少了這一點:)

你基本上要一個2列布局與conditionnal顯示爲混合第一列。

列顯示將由bootstrap完全處理（並且實際上你在這裏與你的列混淆了很多），條件顯示應該通過你的組件狀態進行管理。

首先你的版面應該像這樣的財產以後：

<div className='row'> 
    <div className='col-sm-7'> 
     <div> [your chart here] </div> 
    </div> 
    <div className='col-sm-5'> 
     <div> [your first block here] </div> 
     <div> [your second block here] </div> 
    </div> 
</div>

然後，你需要你的組件狀態裏面一個布爾值，將決定圖表中是否應該顯示。讓我們假設你存儲在this.state.showChart

<div className='row'> 
    {this.state.showChart ? 
     <div className='col-sm-7'> 
      <div> [your chart here] </div> 
     </div> 
    : '' } 
    <div className='col-sm-5'> 
     <div> [your first block here] </div> 
     <div> [your second block here] </div> 
    </div> 
</div>

此信息。如果這是insuffisant，儘量提高你的解釋了一下，我可以在你的沙箱樣品直接工作:)

來源

2017-08-08 10:26:31

作出反應條件顯示自舉，保持佈局機智

回答

相關問題