“逗号运算符的左侧..”渲染的 html 内容中的错误

Question

其简单的过程；

这是我想要的原始渲染方法（我希望我的表在 div 之外）：

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

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

所以只有差异是桌子的地方。 为什么 jsx 会干扰这个过程？为什么它是必要的？

原文由 TyForHelpDude 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 JSX 中，我们只能返回一个 html 来自 return 的元素，不能返回多个元素，如果你想返回多个元素然后包装所有的html div 或任何其他包装器组件中的代码。

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

对于 conditional rendering 组件，您必须遵循相同的规则。

例子：

正确的：

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

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只是一个快速更新。如果您使用的是 React v16.2.0 及更高版本，您还可以使用 Fragments 。

   return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div>
    </>
  );

我也回答了类似的问题，更深入 here

原文由 Kevin Amiranoff 发布，翻译遵循 CC BY-SA 4.0 许可协议