问题描述
在使用 Babel 编译 React 代码时，有时会遇到这样的错误提示：
------------ ----------------- --- ----------- ---- ---- --- ------ --------
这个错误提示的意思是，JSX 表达式必须要有一个父元素。也就是说，如果你在 JSX 中返回了多个元素，就必须将它们包裹在一个容器元素中。
解决方案
解决这个问题的方法很简单，只需要将多个元素包裹在一个容器元素中即可。例如：
-- ----
----- ----------- - -- -- -
------ -
----------------
----------------
--
--
-- ----
----- ----------- - -- -- -
------ -
-----
----------------
----------------
------
--
--在上面的例子中，我们将两个 div 元素包裹在了一个容器元素中，这样就解决了 "JSX expressions must have one parent element." 的错误问题。
深入理解
为什么 JSX 表达式必须要有一个父元素呢？这是因为 React 在渲染 JSX 表达式时，会将它们转换成 JavaScript 对象。
例如，下面这个 JSX 表达式：
---------------- ----------------
会被转换成这样的 JavaScript 对象：
- -------------------------- ----- --------- -------------------------- ----- -------- -
可以看到，React 将多个元素转换成了一个数组。但是，当我们在 JSX 表达式中返回多个元素时，React 不知道应该将它们放在哪个容器元素中，因此就会报错。
总结
在使用 Babel 编译 React 代码时遇到 "JSX expressions must have one parent element." 的错误，只需要将多个元素包裹在一个容器元素中即可。这个错误提示的背后，是 React 将 JSX 表达式转换成 JavaScript 对象的机制。理解这个机制，可以更好地理解 React 的工作原理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6506899395b1f8cacd25b2b5