Cách sửa lỗi không khớp với `` risklySetInnerHTML '' trong React

Tìm hiểu cách tôi đã giải quyết lỗi "dangerouslySetInnerHTMLkhông khớp ", trong một ứng dụng React

Tôi đang cố gắng in HTML có trong một giá đỡ, bằng cách sử dụngdangerouslySetInnerHTML, trong khi tôi gặp lỗi này trong bảng điều khiển trình duyệt:

Warning: Prop `dangerouslySetInnerHTML` did not match.

This was a Next.js project, but the solution applies to any React code.

The string I was trying to print appeared for a while, and then disappeared. Quite strange!

It was even stranger when I tried to print a fixed HTML string, like this:

<p
  dangerouslySetInnerHTML={{
    __html: '<p>test</p>'
  }}></p>

The error message is cryptic but after a while, I realized I could not set a p tag inside another p tag.

Switching to:

<div
  dangerouslySetInnerHTML={{
    __html: '<p>test</p>'
  }}></div>

worked like a charm.

Download my free React Handbook


More react tutorials: