作出反应条件显示自举，保持布局机智

我使用的反应，引导工作的一个项目。我有一个大的条形图和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

作出反应条件显示自举，保持布局机智

回答

相关问题