列布局的React JSX条件渲染[重复]

Posted 2023-02-22

【中文标题】列布局的React JSX条件渲染[重复]

【英文标题】：React JSX conditional rendering of column layout [duplicate]

【发布时间】：2021-08-24 07:36:21

【问题描述】：

我想要一个 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”为真时，才呈现子文本和图标。现在上面的方法不起作用，我收到一个语法错误；

相邻的 JSX 元素必须包含在封闭标记中。你是否 想要一个 JSX 片段 ...>

如果我添加一个包装 ColumnLayout，这将有效。但是，当 showSubTextAndIcon 为 true 时，这会弄乱我的布局。

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

注意： ColumnLayout 来源于material ui 库。

【参考方案1】：

你只需要 Fragment，因为 React 期望一个数组或一个元素作为返回：

import React,  Fragment  from 'react';

然后把它包起来。

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

【讨论】：

你也可以省略Fragment而直接使用<> </>

您也可以这样做^^，但请注意，它仅在您使用 Babel v7.0.0-beta.31 及更高版本时才有效。 （在创建反应应用程序中它已经在较新的版本中工作）。另请注意，您不能以速记方式传递属性，但可以以速记方式传递。所以如果你正在映射它，你也可以考虑一下。

【参考方案2】：

如果你想要一个单一的条件，你需要包装你的元素，正如错误提示和你已经发现的那样。如果它破坏了您的布局，您可以更改您的 CSS，或者尝试使用简单的 <div> 而不是嵌套 ColumnLayout 元素。

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

<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>

【参考方案3】：

另一种方法是将组件包装在一个数组中并给它们键：

<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>

【参考方案4】：

你需要将它包含在一个片段中，因为 react 只需要一个元素作为返回：

<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>
       </>
        :" "
    
</ColumnLayout>