React中使用MUI的ColumnLayout实现条件渲染时JSX报错如何解决？

解决方案 #

你遇到的报错本质是JSX语法要求单个表达式不能返回多个并列的根元素，而包裹额外的ColumnLayout容器会破坏派生自MUI的栅格系统父子节点匹配规则，所以用JSX片段（Fragment） 做占位容器即可，它不会生成真实DOM节点，完全不会影响原有布局。

正确代码示例 #

<ColumnLayout container spacing={1}>
    <ColumnLayout item xs={9}>                    
        <b>{text}</b>
    </ColumnLayout>
    {showSubTextAndIcon ?
        <> {/* 这里用JSX片段做无渲染包裹 */}
            <ColumnLayout item xs={2}>                    
                <span>{subText}</span>
            </ColumnLayout>
            <ColumnLayout item xs={1}>
                <Icon  />
            </ColumnLayout>
        </>
        : null
    }
</ColumnLayout>

补充说明 #

如果你的项目使用的React版本低于16.2，不支持<>短语法，可以替换为<React.Fragment>标签，功能完全一致：

{showSubTextAndIcon ?
    <React.Fragment>
        <ColumnLayout item xs={2}>                    
            <span>{subText}</span>
        </ColumnLayout>
        <ColumnLayout item xs={1}>
            <Icon  />
        </ColumnLayout>
    </React.Fragment>
    : null
}

内容的提问来源于stack exchange，提问作者copenndthagen