# JSX 只能有一个父元素

3 min read
react
Table of Contents

在 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.');
}

参考链接

More Posts