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

Question

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

|MyComponent1|
|MyComponent2|

我的条件是：

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

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

|MyComponent2||MyComponent1|

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

标签： javascriptreactjsmaterial-uicomponentsstyling

Answer 1

你可以这样做。使用 null 不是一个好习惯

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