React --> 警告：validateDOMNesting(...): <p> 不能作为 <p> 的后代出现

Posted 2023-03-07

【中文标题】React --> 警告：validateDOMNesting(...): <p> 不能作为 <p> 的后代出现

【英文标题】：React --> Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>

【发布时间】：2019-01-02 01:30:11

【问题描述】：

我在浏览器控制台中收到此警告：

warning.js?da67:33 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

上线：

<p>this.state.error && <p className="errorText">this.state.error</p></p>

这是一个反应项目。我也在使用 webpack。如何解决这个问题？

【参考方案1】：

警告会告诉您具体需要做什么。您不能嵌套<p> 标签，因此使用div 作为外部标签，如

<div>
   this.state.error && 
      <p className="errorText">
           this.state.error
       </p>
   
</div> 

【讨论】：

谢谢，我已经尝试过了，但又遇到了另一个错误，但现在它可以正常工作了：D

按照规范，你不应该这样做，但我不知道任何现代浏览器不会呈现这样的 DOM 结构。

【参考方案2】：

我通过从文本字段中删除父标签解决了这个问题