Maison > Questions et réponses > le corps du texte
今天再看阮一峰老师的React入门实例的时候,对这段代码很困惑
var HelloMessage = React.createClass({
render: function() {
return (
<h1>
Hello {this.props.name}
</h1>
<p>
some text
</p>);
}
});
文章中说这段代码出错的原因是这段代码中使用两个顶层标签,虽然在做前端方面工作,但未曾遇到这种问题,什么是HTML中的顶层标签?
高洛峰2017-04-11 13:15:30
我帮你格式化了一下。
我虽然没看过阮老师的文章,但是你说的“顶层标签”的问题,是指任何return出的JSX,必须由一个标签来包裹。
你举的例子
return (
<h1>
Hello {this.props.name}
</h1>
<p>
some text
</p>
);
就是相当于暴露了两个标签<h1/>
, <p/>
,这样写是会报错的,必须由一个标签包裹起来。
return (
<p>
<h1>
Hello {this.props.name}
</h1>
<p>
some text
</p>
</p>
);
看到里面的<p>
吗,就是所谓的“顶层标签”。
怪我咯2017-04-11 13:15:30
其实就只指代包裹这个部分的标签,即在这个范围里,最上层的标签只能有一个,不能并列多个。因为React会将这部分转为控件,控件对应一个标签会比较容易管理,所以React只允许出现一个顶层标签,这样就可以直接进行控制与标签的绑定了。
迷茫2017-04-11 13:15:30
这样来看
<h1>
<p></p>
</h1>
这里的顶层标签只有一个就是h1
<h1></h1>
<p></p>
这里的顶层标签就有两个啦
这应该不是一种专业的术语。