babel + react + jsx呈现奇怪的标记

Question

我用的是react 0.13.3和babel 5.8.26。我注意到它开始呈现奇怪的标记。我在js文件中有这就是：

<p className="navbar-text navbar-right dropdown hidden-xs">
    <a className="navbar-link dropdown-toggle" href="#" id="accountddl" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i className="st st-profile st-2"></i></a>
    <ul className="dropdown-menu" aria-labelledby="accountddl">
        <li><a href="#">Action</a></li>
    </ul>
</p>

你可以看到那里的输出。

但是它呈现回来的是这

<p class="navbar-text navbar-right dropdown hidden-xs" data-reactid=".0">
    <a class="navbar-link dropdown-toggle" href="#" id="accountddl" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-reactid=".0.0">
        <i class="st st-profile st-2" data-reactid=".0.0.0"/>
    </a>
</p>
<ul class="dropdown-menu" aria-labelledby="accountddl" data-reactid=".0.1">
    <li data-reactid=".0.1.0">
        <a href="#" data-reactid=".0.1.0.0">Action</a>
    </li>
</ul>
<p/>

正如您所看到的，它在呈现ul之前关闭了p标记，最后它附加了一个自关闭的p标记。

如何使ul成为父p标记的一部分？我做错了什么吗？

如果我将p改为div，它将按预期工作- 结果。

更新

多亏了那些家伙的评论。我意识到这不是有效的HTML。反应是好的，做好它的工作。因此，当浏览器看到情况时，它决定按照上面所示的方式打破它。

Answer 1

HTML规范定义了如何嵌套标记的规则。在这种情况下：

是：

内容类别:流内容、可触摸内容。 允许内容:措辞内容。

是：

内容类别:流动内容 允许的父元素:任何接受流动内容的元素

这意味着在<ul>元素中不允许使用<p>元素。为了避免这种情况，React和/或浏览器基本上会在DOM中将<ul>拉高一级，并将<p>拆分到它周围，从而得到所看到的结果。

更新

来自新发布的React 0.14的发行说明

当对HTML元素进行无效嵌套时，React现在会警告您，这可以帮助您避免在更新期间出现令人惊讶的错误。