Question

我有此代码：

<Grid item xs={12}>
    <Grid container spacing={8} >
        <Grid item xs={3} ></Grid>

        { someState && <SomeComponent /> }

    </Grid>
</Grid>

在第一个渲染中，someState将始终为false，只有当我更改该状态时，我才会显示SomeComponente，但我需要使该网格可见且为空，换句话说，使用dom中的行空间。我不要把它藏起来我该怎么做？我尝试将代码中显示的Grid组件设置为空，但Grid容器未使用该空间。

const SomeComponent = () => (
    <Fragment>
        <Grid item xs={3}>
            <Typography variant="body1">Title</Typography>
        </Grid>
        <Grid item xs={3}>
            asdasdasd
        </Grid>
    </Fragment>
);

Answer 1

尝试一下：

<Grid item xs={3} >{someState && <SomeComponent />}</Grid>

这将创建与someState无关的网格，并在someState通行后填充该空间。

React，Material-UI，Grid空项目

1 个答案: