javascript - 使用 Bootstrap react 条件渲染，保持布局完整

Question

我正在使用 React 和 Bootstrap 开发一个元素。我有一个大条形图和 2 个小方框，它们都需要水平放置在一起。

它应该是这样工作的..展开笔窗口以查看它们水平放置在一起(正确方法):

https://codesandbox.io/s/lO9rvrBYM

但是我需要一些条件渲染逻辑，以防没有数据并且我不想显示大条形图。在这里查看:

https://codesandbox.io/s/ELLzLo3g

在条件渲染的例子中，它不能再正确定位元素。他们永远坐在彼此之上。

我认为这与第 69 行有关。我需要用少一个关闭来渲染该图 </div>以保持水平布局的完整性，但这会引发语法错误。

任何擅长 Bootstrap 的人有解决这个问题的建议吗？

Answer 1

首先，您的问题和示例并不清楚您想要实现的目标，所以我的回答可能没有捕获要点:)

您基本上想要一个 2 列布局，第一列有条件显示。

列显示将完全由 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>

然后您需要在组件状态中使用一个 bool 值来决定是否显示图表。假设您将此信息存储在 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>

如果这还不够，请尝试改进您的解释，我可以直接处理您的沙盒示例:)