在同一行上对齐条件渲染组件 - Material UI

Question

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

|MyComponent1|
|MyComponent2|

我的条件是：

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

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

|MyComponent2||MyComponent1|

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

Answer 1

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

if(condition){ 这样做 }else{ 改为这样做 }

{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 或样式导致问题。

Answer 2

你可以通过这种方式做到这一点。 使用 null 不是一个好习惯

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