reactjs - "left side of comma operator.."渲染的html内容错误

Question

其简单的过程；

这是我想要的原始渲染方法(我希望我的表格位于 div 之外):

但是 jsx 编译器由于某种原因不允许它？

但是如果我将表格移动到 div 元素内；一切看起来都很好。

所以只有 diff 是表的位置。 为什么 jsx 会干扰这个过程？为什么有必要？

Answer 1

在JSX中，我们在return中只能返回一个html元素，不能返回多个元素，如果要返回多个然后，elements 将所有 html 代码包装在 div 中或通过任何其他包装组件。

第一种情况也发生了同样的情况，您返回 2 个元素，一个 div 和一个 table。当您将它们包装在一个 div 中时，一切正常。

对于组件的条件渲染，您必须遵循相同的规则。

示例:

正确:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

错误:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}