列布局的React JSX条件呈现[重复]

Question

我想动态呈现JSX，如下所示；

<ColumnLayout container spacing={1}>
    <ColumnLayout item xs={9}>                    
        <b>{text}</b>
    </ColumnLayout>
    {showSubTextAndIcon ?
        <ColumnLayout item xs={2}>                    
            <span>{subText}</span>
        </ColumnLayout>
        <ColumnLayout item xs={1}>
            <Icon  />
        </ColumnLayout>
        : null
    }
</ColumnLayout>

因此，我希望仅当“showSubTextAndIcon”为true时，才渲染该子文本和图标。现在，上述方法不起作用，我得到一个语法错误，说：；

相邻的JSX元素必须包装在一个封闭的标记中。你想要一个JSX片段吗

这工作，如果我添加一个包装列布局。然而，当show SubTextAndIcon是真的时，这会扰乱我的布局。

{showSubTextAndIcon ?
        <ColumnLayout container spacing={1}>
            <ColumnLayout item xs={2}>                    
                <span>{subText}</span>
            </ColumnLayout>
            <ColumnLayout item xs={1}>
                <Icon  />
            </ColumnLayout>
        </ColumnLayout>
        : null
    }

注意：列布局是从材料ui库派生的。

Answer 1

另一种方法是将组件包装在数组中，并为其提供键：

<ColumnLayout container spacing={1}>
    <ColumnLayout item xs={9}>                    
        <b>{text}</b>
    </ColumnLayout>
    {showSubTextAndIcon && [
        <ColumnLayout item xs={2} key={1}>                    
            <span>{subText}</span>
        </ColumnLayout>,
        <ColumnLayout item xs={1} key={2}>
            <Icon  />
        </ColumnLayout>
    ]}
</ColumnLayout>

Answer 2

如果您想要一个单一的条件，那么您需要按照错误提示和您已经发现的那样包装您的元素。如果它破坏了你的布局，你可以改变你的CSS，或者用一个简单的

另一种解决方案是将相同的条件添加到要在该条件下显示的每个元素中，如：

<ColumnLayout container spacing={1}>
    <ColumnLayout item xs={9}>                    
        <b>{text}</b>
    </ColumnLayout>
    {showSubTextAndIcon &&
        <ColumnLayout item xs={2}>                    
            <span>{subText}</span>
        </ColumnLayout>}
    {showSubTextAndIcon &&
        <ColumnLayout item xs={1}>
            <Icon  />
        </ColumnLayout>}
</ColumnLayout>

Answer 3

您只需要片段，因为React需要一个数组或元素作为返回：

import React, { Fragment } from 'react';

把它包起来。

{showSubTextAndIcon &&
       <Fragment>
          <ColumnLayout item xs={2}>                    
              <span>{subText}</span>
          </ColumnLayout>
          <ColumnLayout item xs={1}>
              <Icon  />
          </ColumnLayout>
        </Fragment>
    }