React --> 警告：validateDOMNesting（...）： <p>不能出现在<p>的后代中

Question

我在浏览器控制台中看到了这个警告：

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

在线的意思是“on line”。

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

这是一个React项目。同时我正在使用webpack。如何解决这个问题？

- user10132337

Answer 1

警告提示你需要做什么。你不能嵌套 <p> 标签，因此请使用 div 作为外部标签，例如：

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

- Shubham Khatri

---

谢谢，我尝试了这个方法，虽然出现了另一个错误，但现在它已经可以工作了 :D - user10132337

根据规范，你不应该能够这样做，但我不知道有哪个现代浏览器无法呈现这样的DOM结构。 - Slbox

Answer 2

我解决了这个问题，通过将父标签从我的文本字段中移除。

- dizad87