隐藏材质UI依然渲染元素答案

【问题标题】：Hidden material UI still rendering element隐藏材质UI依然渲染元素
【发布时间】：2018-07-29 16:41:27
【问题描述】：

我正在尝试有条件地隐藏材质 ui 组件。

我的第一个想法是我根本不会渲染元素（考虑到我不是纯粹由于“断点”原因而隐藏它）......但根据材料 UI Hidden 元素的文档这里：https://material-ui.com/layout/hidden/

这样做的好处是根本不呈现任何内容，除非遇到断点。

得分，听起来不错。我可以说Hidden 元素在大于 xs 且小于 lg 时应用，并且它具有在应用时始终隐藏组件的效果。

但是，当我使用以下代码将组件包装在隐藏元素中时：

    let withPaper = <Paper>{this.buildQuestion()}</Paper>;

    let withToolTip = withPaper;
    if (tooltip != null) {
        withToolTip = <Tooltip title={tooltip} enterDelay={500} leaveDelay={200}>{withPaper}</Tooltip>
    }

    let withHidden = withToolTip;
    if (this.props.hidden) {
        withHidden = <Hidden xsUp xlDown>{withToolTip}</Hidden>
    }

    return withHidden;

只有可见性似乎发生了变化。它仍然占用屏幕上的空间。看下面两张截图。您会注意到，当不包含 Hidden 时会显示“站号”文本字段，包含时它是不可见的......但是，该组件仍然占用 material-ui Grid 中的空间。

（忽略混乱的垂直对齐）没有站号上的Hidden 组件：

使用Hidden 组件：

根据文档，这似乎不是正常/正确的行为。

我怎样才能让包装的组件完全不影响屏幕上的任何东西（希望同时仍然能够访问它的值和道具？）？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

原来我的组件位于一个网格项 (https://material-ui.com/layout/grid/) 中，因此，虽然文本字段实际上并没有呈现...一个空的网格项是。

【讨论】：

好提醒。我对 React 很陌生，这让我很伤心。