使用Bootstrap进行条件渲染，保持布局完整

Question

I'm working on a project using React and Bootstrap. I have one big bar graph and 2 little boxes that all need to sit horizontally together.

Here's how it should work.. expand the pen window to see them sit horizontally together (the correct way):

https://codesandbox.io/s/lO9rvrBYM

However I need some conditional rendering logic in there in case there is no data and I don't want to display the big bar graph. Check that out here:

https://codesandbox.io/s/ELLzLo3g

In the example with conditional rendering it can no longer properly position the elements. They sit permanently on top of one another.

I think it has to do with line 69. I need to render that graph with one less closing </div> to keep the horizontal layout in tact, but that throws a syntax error.

Anyone great at Bootstrap have any tips to solve this?

Answer 1

First of all, your question & samples are not that clear on what you want to achieve, so my answer might be missing the point :)

You basically want a 2 column layout mixed with a conditionnal display for the first column.

The column display will be handled fully by bootstrap (and you actually messed up a lot with your columns here), the conditionnal display should be managed through your component state.

First your layout should look like somthing like that :

<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>

Then you need a boolean value inside your component state that will decide whether or not the chart should be displayed. Lets assume you store this information in 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>

If this is insuffisant, try to improve your explanations a bit and I can work on your sandbox samples directly :)