JSX 只能有一个父元素
2023 react在 JSX 里有且只能有一个父元素,当存在多个父元素会报错。
示例
export default function App() {
return (
<div>Hello, React.</div>
<div>Hello, JavaScript.</div>
);
}
如果运行以上的代码,在使用 babel-loader 加载转换 jsx 时,那么将会得到以下的错误提示:
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
在 react.dev 给出的回答是:
JSX 虽然看起来很像 HTML,但是底层其实是经过转换的 JavaScript 对象。正如你不能在函数中返回多个对象,你也只能返回只有一个父元素的 JSX 标签元素。
React.createElement
在了解 JSX 是一种类似 HTML 语法的 JavaScript 之后,再来看看 JSX 与 React.createElement 之间的关系。
在 ReactElement.js 中 createElement 函数定义:
export function createElement(type, config, children) {
let propName;
// 提取保留的属性
const props = {};
let key = null;
let ref = null;
let self = null;
let source = null;
// 进行属性的提取,包括 key, ref 及其他属性。
if (config != null) {
// 提取 ref 关键字
if (hasValidRef(config)) {
ref = config.ref;
}
// 提取 key 关键字
if (hasValidKey(config)) {
key = '' + config.key;
}
self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
// 将剩余的属性值放入 props 对象
for (propName in config) {
if (
hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)
) {
props[propName] = config[propName];
}
}
}
// children 可能有多个参数
const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
const childArray = Array(childrenLength);
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
所有当我们运行代码,会进行如下转换,转换效果可以参考 Babel
return (
<div>
Hello, <span>World</span>
</div>
);
return React.createElement(
"div",
null,
"Hello, "
ReactElement.createElement("span", null, "World")
)
多个父元素
回到开头的代码,经过转换
export default function App() {
return (
<div>Hello, React.</div>
<div>Hello, JavaScript.</div>
);
}
export default function App() {
return React.createElement('div', null, 'Hello, React.');
return React.createElement('div', null, 'Hello, JavaScript.');
}