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

Question

我将 React 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 标签.

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

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

更新

感谢大家的评论。我意识到这是无效的 HTML。 React 很好，并且能很好地完成它的工作。所以，当浏览器看到这种情况时，它决定按照上面显示的方式打破它。

Answer 1

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

<p> 是：

Content categories: Flow content, palpable content.

Permitted content: Phrasing content.

<ul> 是：

Content categories: Flow content

Permitted parent elements: any element that accept flowing content

这意味着 <ul> 个元素不允许出现在 <p> 个元素中。为了避免这种情况，React and/or 浏览器基本上会将 DOM 中的 <ul> 拉高一层，并在其周围拆分 <p>，从而产生您所看到的结果。

更新

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

React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.

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

babel + react + jsx renders strange markup

javascript

reactjs

react-jsx

babeljs

更新

更新