[英]Align conditional rendered component on same line - Material UI
I have a component that is re-used twice and the result is:我有一个重复使用两次的组件,结果是:
|MyComponent1|
|MyComponent2|
My condition is:我的条件是:
if (a == 'One' || b == 'Two'){
<MyComponent data={data}/>
}
The a & b condition is satisfied after each iteration with different data (hence "MyComponent1" and "MyComponent2"), hence the component gets rendered twice.每次迭代后都会满足 a & b 条件,使用不同的数据(因此是“MyComponent1”和“MyComponent2”),因此组件被渲染两次。 I'm using material UI and pretty new to it.
我正在使用 Material UI 并且对它很陌生。 I tried using Grid but did not work.
我尝试使用 Grid 但没有奏效。 I want the same component with different values to be on the same line like:
我希望具有不同值的相同组件位于同一行上,例如:
|MyComponent2||MyComponent1|
Anything that can be used with Material-UI?任何可以与 Material-UI 一起使用的东西?
I don't know if you mean on the same line as in the css.我不知道你的意思是不是和 css 在同一行。 But if you want each component to be rendered conditionally you'll want it like this.
但是,如果您希望有条件地呈现每个组件,您会希望它像这样。 This example uses the ternary operator syntax.
此示例使用三元运算符语法。 It's the same as saying
这和说的一样
if(condition){ do this }else{ doing this instead } 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>
That should put them in a grid.那应该把它们放在一个网格中。 You might have css or styling causing issues though.
不过,您可能有 css 或样式导致问题。
You can do it in this ways.你可以通过这种方式做到这一点。 Using null is not a good practice
使用 null 不是一个好习惯
(a === 'One' || b === 'Two')&&(<MyComponent data={data}/>)
(a ==='One' || b === 'Two')?(<MyComponent data={data}/>):<></>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.