Question

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

/Library/Frameworks/Python.frameworks/versions/3.7/bin/python3

我的状况是：

users@users ~ % /Users/users/PycharmProjects/MergedFiles/dist/main/main ; exit;
[576] Error loading Python lib '/Users/users/PycharmProjects/MergedFiles/dist/main/Python': dlopen: dlopen(/Users/users/PycharmProjects/MergedFiles/dist/main/Python, 10): no suitable image found.  Did find:
    /Users/users/PycharmProjects/MergedFiles/dist/main/Python: code signature invalid for '/Users/users/PycharmProjects/MergedFiles/dist/main/Python'

在每次迭代之后，使用不同的数据（因此“ MyComponent1”和“ MyComponent2”）都满足a和b条件，因此该组件被渲染两次。我正在使用实质性UI，并且还很新。我尝试使用网格，但是没有用。我希望具有不同值的相同组件位于同一行，例如：

|MyComponent1|
|MyComponent2|

Material-UI可以使用什么？

Answer 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或样式问题。

Answer 2

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

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

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

2 个答案: