Question

我使用反应0.13.3与babel 5.8.26。我注意到它开始呈现奇怪的标记。 This is what 我在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>

你可以在那里看到输出。

但它呈现的是this：

<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 标记。< / p>

如何将 ul 作为一个父 p 标记的一部分？我做错了吗？

如果我将 p 更改为 div ，它会按预期工作 - result

更新

感谢大家的评论。我意识到这不是有效的HTML。反应很好，做得很好。因此，当浏览器看到案例时，它决定按照上面显示的方式将其分解。

Answer 1

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

<p>是：

内容类别：流量内容，可触及的内容。

允许的内容：短语内容。

<ul>是：

内容类别：流量内容

允许的父元素：接受流动内容的任何元素

转换为<ul>元素中不允许的<p>个元素。为了避免这种情况，React和/或浏览器基本上会在DOM中提升<ul>一级并在其周围拆分<p>，从而产生您所看到的内容。

更新

从新发布的React 0.14：

的发行说明中

当无效嵌套HTML元素时，React DOM会立即向您发出警告，这有助于您避免在更新期间出现意外错误。

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

更新

1 个答案:

更新