React中Leaflet弹窗HTML结构异常：p标签未正确包裹子元素

嘿，这个问题我之前帮人排查过！你遇到的情况其实是HTML的固有解析规则在搞鬼：

<p>标签是个特殊容器，它属于「只能容纳行内元素或纯文本」的标签（虽然它自身是块级元素）。当浏览器解析到<p>内部出现<h4>、<button>这类默认是块级的元素时，会自动提前闭合<p>标签，把这些块级元素“踢”出去，以此符合HTML规范——这就是你在检查器里看到结构混乱的原因。

最简单的解决方案：替换父容器标签 #

把外层的<p>换成<div>就搞定了！<div>是通用的块级容器，没有内容限制，可以完美包裹任何元素，包括<h4>和<button>。修改后的代码如下：

layer.bindPopup(`<div data-campaign="4" data-token="${this.state.reg_mapping[feature.properties.name]}">
  <h4>Region: ${feature.properties.name}</h4>
  <h4 data-token-re></h4>
  <button type="submit" data-button>Donate Now</button>
</div>`);

如果你非要用<p>标签（不推荐） #

如果因为样式或其他原因必须保留<p>，可以把内部的<h4>改成<span>，并通过CSS设置成类似标题的样式，同时把<button>改成行内块级元素：

layer.bindPopup(`<p data-campaign="4" data-token="${this.state.reg_mapping[feature.properties.name]}">
  <span class="popup-title">Region: ${feature.properties.name}</span>
  <span class="popup-title" data-token-re></span>
  <button type="submit" data-button style="display: inline-block;">Donate Now</button>
</p>`);

然后配合CSS：

.popup-title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.5em 0;
}

不过这种方式会增加不必要的样式代码，远不如直接用<div>来得简洁直观。

内容的提问来源于stack exchange，提问作者Fredy