HTML什么是顶层标签

Question

今天再看阮一峰老师的React入门实例的时候，对这段代码很困惑

var HelloMessage = React.createClass({
  render: function() {
    return （
    <h1>
      Hello {this.props.name}
    </h1>
    <p>
      some text
    </p>）;
  }
});

文章中说这段代码出错的原因是这段代码中使用两个顶层标签，虽然在做前端方面工作，但未曾遇到这种问题，什么是HTML中的顶层标签？

Answer 1

我帮你格式化了一下。

我虽然没看过阮老师的文章，但是你说的“顶层标签”的问题，是指任何return出的JSX，必须由一个标签来包裹。

你举的例子

return (
   <h1>
     Hello {this.props.name}
   </h1>
   <p>
     some text
   </p>
);

就是相当于暴露了两个标签<h1/>, <p/>，这样写是会报错的，必须由一个标签包裹起来。

return (
    <div>
        <h1>
          Hello {this.props.name}
        </h1>
        <p>
          some text
        </p>
    </div>
);

看到里面的<div>吗，就是所谓的“顶层标签”。

Answer 2

其实就只指代包裹这个部分的标签，即在这个范围里，最上层的标签只能有一个，不能并列多个。因为React会将这部分转为控件，控件对应一个标签会比较容易管理，所以React只允许出现一个顶层标签，这样就可以直接进行控制与标签的绑定了。

Answer 3

这样来看

<h1>
    <p></p>
</h1>

这里的顶层标签只有一个就是h1

<h1></h1>
<p></p>

这里的顶层标签就有两个啦

---

这应该不是一种专业的术语。