javascript - HTML什么是顶层标签

问题描述

问 题

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

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

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

解决方案

我帮你格式化了一下。

我虽然没看过阮老师的文章，但是你说的顶层标签的问题，是指任何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>吗，就是所谓的顶层标签。

这篇关于javascript - HTML什么是顶层标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！