Trong quá trình xây dựng website với React.js, có một vài trường hợp bạn không cần code tất cả mọi thứ lại từ đầu, mà có thể sử dụng một đoạn HTML String được viết sẵn rồi sau đó render lên ứng dụng của mình. HTML String có thể gặp trong các trường hợp sau:

  • Nội dung blog từ CMS như WordPress
  • Embedded code từ Google Form, Youtube

Trước khi quyết định render bất đoạn HTML String nào trên ứng dụng của mình, bạn đều cần phải chắc chắn những đoạn code ấy có nguồn gốc đáng tin cậy. Vì khi render, nó sẽ trở thành một phần của ứng dụng. Và nếu không cẩn thận, bạn có thể gặp một vài rắc rối. Xem thêm: XXS Attack.

Để render HTML String trong một ứng dụng React, ta có hai cách: dùng props dangerouslySetInnverHTML hoặc dùng npm package html-react-parser

dangerouslySetInnerHTML

React có cung cấp sẵn cho ta một API để render các đoạn HTML String, bằng cách sử dụng props dangerouslySetInnerHTML. Thông thường, ta sẽ render các HTML String này với một thẻ <div/>. Định dạng của props này sẽ là một Object, với key __html có giá trị là HTML String cần render.

const content = "<p>First &middot; Second</p>;

function createMarkup(htmlString) {
    return {__html: htmlString}
}

function MyComponent() {
    return <div dangerouslySetInnerHTML={createMarkup(content)} />;
}

Dùng npm package html-react-parser

Nếu bạn cảm thấy dùng API của React quá bất tiện, không sao, bạn có thể thử package html-react-parser. Trước tiên, cài đặt package này vào ứng dụng:

yarn add html-react-parser

Sau đó, chỉ cầm import parse từ html-react-parser và sử dụng. parse là một function, và parameter truyền vào chính là HTML cần render.

import parse from 'html-react-parser';

const content = "<p>First &middot; Second</p>;

function MyComponent() {
    return <div>{parse(content)}</div>;
}

Tạm kết

Bạn có thể dùng bất kỳ cách nào trong hai các ở trên để render HTML String trên ứng dụng của mình. Tuy nhiên, vì đây là một việc làm có rủi ro rất cao (đó là lý do vì sao React gọi API là dangerousSetInnerHTML), bạn hãy chắc chắn nguồn gốc HTML String mà mình có được là một nơi có thể tin tưởng. Nếu không thì hậu quả sẽ rất khó lường.