为什么 React 会奇怪地渲染 <p>（段落）标签？

Question

React 使用 <p> 标签做一些奇怪的事情。使用相同的标记结构，使用 <p> 标签与使用 <div> 标签会产生截然不同的结果。例如，

var withP = (
    <p>
      withP
      <div />
    </p>
);

var withDiv = (
    <div>
      withDiv
      <div />
    </div>
);

下面是生成的标记在 chrome 中的样子：

Here is a live jsbin demo.

为什么 React 呈现 <p> 与 <div> 不同？

Answer 1

<p> can not have nested block elements。 Chrome（不是 React）正在转换标记以使其有效。