Question

我正在使用React和Bootstrap处理项目。我有一个大条形图和2个小盒子，都需要水平放置在一起。

以下是它应该如何工作..展开笔窗以看到它们水平放置在一起（正确的方式）：

但是我需要一些条件渲染逻辑，以防万一没有数据，我不想显示大条形图。检查一下：

在具有条件渲染的示例中，它无法再正确定位元素。他们永远坐在一起。

我认为它与第69行有关。我需要使用少一个结束switch (((LPNMHDR)lParam)->code) { case LVN_GETINFOTIP: CreateListView( 0, LVS_EX_GRIDLINES | LVS_EX_FULLROWSELECT | LVS_EX_INFOTIP | LVS_EX_LABELTIP, 0, 3 * TAB_HIGHT, OwnWindowWidth, OwnWindowHight - (OBJ_WINDOW_HIGHT + (3 * TAB_HIGHT)), hWnd, (HMENU)IDC_MAIN_LISTVIEW, (HINSTANCE)GetWindowLongPtr(hWnd, GWLP_HINSTANCE)); static HWND CreateListView( DWORD dwAddStyle, DWORD dwAddExtendedListViewStyle, int X, int Y, int nWidth, int nHeight, HWND hWndParent, HMENU IdListWiew, HINSTANCE hInst) { HWND hWndListView; INITCOMMONCONTROLSEX icex; memset(&icex, 0, sizeof(INITCOMMONCONTROLSEX)); // Ensure that the common control DLL is loaded. icex.dwSize = sizeof(INITCOMMONCONTROLSEX); icex.dwICC = ICC_LISTVIEW_CLASSES; InitCommonControlsEx(&icex); // Create the list-view window in report view with label // editing enabled. hWndListView = CreateWindowEx(WS_EX_ACCEPTFILES, WC_LISTVIEW, L"", WS_CHILD | LVS_REPORT | WS_VISIBLE | WS_BORDER | WM_NOTIFY | dwAddStyle, X, Y, nWidth, nHeight, hWndParent, IdListWiew, hInst, NULL); if (hWndListView == NULL) return NULL; ListView_SetExtendedListViewStyle(hWndListView, dwAddExtendedListViewStyle); return hWndListView; }来渲染该图形以保持水平布局，但这会引发语法错误。

Bootstrap的任何人都有解决这个问题的技巧吗？

Answer 1

首先，你的问题＆amp;样本并不清楚你想要达到的目标，所以我的答案可能会忽略这一点：）

你基本上想要一个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>

然后在组件状态中需要一个布尔值，用于决定是否应显示图表。让我们假设您将此信息存储在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>

如果这是不足够的，请尝试稍微改进您的解释，我可以直接处理您的沙箱样本：）

使用Bootstrap实现条件渲染，在Tact中保持布局

1 个答案: