在同一行上对齐条件渲染组件 - 材质 UI答案

【问题标题】：Align conditional rendered component on same line - Material UI在同一行上对齐条件渲染组件 - 材质 UI
【发布时间】：2021-01-01 07:36:23
【问题描述】：

我有一个组件被重复使用了两次，结果是：

|MyComponent1|
|MyComponent2|

我的情况是：

if (a == 'One' || b == 'Two'){
 <MyComponent data={data}/>
}

在每次迭代后使用不同的数据（因此为“MyComponent1”和“MyComponent2”）满足 a & b 条件，因此组件被渲染两次。我正在使用材质 UI，并且对它很陌生。我尝试使用 Grid 但没有用。我希望具有不同值的相同组件位于同一行，例如：

|MyComponent2||MyComponent1|

任何可以与 Material-UI 一起使用的东西？

【问题讨论】：

标签： javascript reactjs material-ui components styling

【解决方案1】：

我不知道你的意思是不是和css在同一行。但是，如果您希望每个组件都有条件地呈现，您会希望它像这样。此示例使用三元运算符语法。和说的一样

如果（条件）{ 做这个 }别的{ 而是这样做 }

{a === 'One' ? <MyComponent data={data}/> : null}
{b === 'Two' ? <MyComponent data={data}/> : null}


<Grid direction="row" >
    {a === 'One' ? <MyComponent data={data}/> : null}
    {b === 'Two' ? <MyComponent data={data}/> : null}
</Grid>

这应该把它们放在一个网格中。不过，您可能有 css 或样式导致问题。

【讨论】：

每个组件一次渲染一个。如果我使用上面的代码，那么它将是两个网格，每个方向 =“row”，并且具有每个组件

【解决方案2】：

您可以通过这种方式进行操作。 使用 null 不是一个好习惯

(a === 'One' || b === 'Two')&&(<MyComponent data={data}/>)
(a ==='One' || b === 'Two')?(<MyComponent data={data}/>):<></>

【讨论】：

如前所述，每个组件一次渲染一个。因此会有两个 Grid @SaimumIslam27