[MDX] Dư thừa thẻ HTML khi dùng với JSX

[MDX] Dư thừa thẻ HTML khi dùng với JSX

06-11-2022

Mình muốn viết một đoạn như này trong file mdx:


<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut odit repellendus
quidem quasi consequuntur itaque? Fugit eveniet provident repellat numquam
dolores non explicabo! Aliquam alias laboriosam enim architecto omnis quaerat?
</h1>

Nội dung sẽ được render ra sẽ bị thành như thế này, nội dung sẽ bị bọc bở thẻ p:


<h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut odit
repellendus quidem quasi consequuntur itaque? Fugit eveniet provident
repellat numquam dolores non explicabo! Aliquam alias laboriosam enim
architecto omnis quaerat?
</p>
</h1>

Để loại bỏ thẻ p bọc nội dung khi được render ra, cách fix đơn giản là thêm {}:


{
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut odit
repellendus quidem quasi consequuntur itaque? Fugit eveniet provident
repellat numquam dolores non explicabo! Aliquam alias laboriosam enim
architecto omnis quaerat?
</h1>;
}

Link issue: https://github.com/mdx-js/mdx/issues/1798