在同一行上對齊條件渲染組件 - 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}/>):<></>