Làm cách nào để hiển thị HTML trong HTML?

Bây giờ, bạn có thể thấy rằng bảng được hình thành từ giá trị trạng thái và được hiển thị trên màn hình như hình bên dưới

Đây là cách sử dụng thuộc tính dangerouslySetInnerHTML .

Lưu ý rằng bạn không nên sử dụng thuộc tính này trừ khi bạn cần hiển thị nội dung tĩnh vì nó thu hút cuộc tấn công tập lệnh chéo trang, đây không phải là môi trường phù hợp cho bất kỳ ứng dụng web nào

Sử dụng thư viện của bên thứ ba

Bạn đã học được cách tiếp cận đơn giản để phân tích các giá trị trạng thái bằng cách sử dụng dangerouslySetInnerHTML . Bạn cũng có thể sử dụng thư viện của bên thứ ba để có chức năng tương tự. Có một số thư viện có sẵn có thể phân tích các giá trị này.

• html-reac-phân tích cú pháp
• phản ứng-html-phân tích cú pháp
• html-để-phản ứng

Trong hướng dẫn này, bạn sẽ tìm hiểu về phân tích cú pháp HTML bằng thư viện ______0_______3 . Để sử dụng thư viện, hãy cài đặt nó bằng lệnh ____0_______4 bên dưới.

1npm install react-html-parser

vỏ bọc quyền lực

Sau khi cài đặt thư viện, hãy nhập nó như hình bên dưới

1import ReactHtmlParser from "react-html-parser";

jsx

Bây giờ bạn có thể sử dụng thư viện để hiển thị cùng một đánh dấu HTML mà chúng tôi đã sử dụng trong ví dụ trên

1constructor() {
2    super();
3    this.state = {
4      myContent: `

5          6            7              8              9            10 11 12 13 14 15 16 17 18 


This is first column
This is second column


This is first column
This is second column


This is first column
This is second column


19 `
20 };
21}

jsx

Bây giờ bạn có giá trị trạng thái dưới dạng nội dung đánh dấu, bước tiếp theo là sử dụng thư viện và phân tích cú pháp HTML

1render() {
2    return (
3      <div>
4        <span>Render HTML using third party library :span>
5        <br />
6        <br />
7        <div>{ReactHtmlParser(this.state.myContent)}div>
8      div>
9    );
10}

jsx

Trong ví dụ trên, có một phần

1render() {
2    return (
3      <div>
4        <span>Render HTML using state string value :span>
5        <br />
6        <br />
7        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
8      div>
9    );
10}

Hàm được sử dụng là ____0_______6 , hàm này chấp nhận giá trị trạng thái dưới dạng chuỗi và sẽ chuyển đổi thành HTML trong quá trình hiển thị.

Vì vậy, khi bạn thực thi ứng dụng, bạn có thể thấy rằng HTML dự kiến ​​đã được hiển thị và đưa ra kết quả mong muốn

Phần kết luận

Phân tích cú pháp HTML là một nhiệm vụ quan trọng liên quan đến việc hiển thị nội dung HTML dựa trên các yêu cầu khác nhau, như sử dụng giá trị đến từ đối tượng trạng thái

Làm cách nào để hiển thị tệp HTML?

Làm cách nào để đưa HTML vào bên trong HTML?

Làm cách nào để hiển thị chuỗi HTML?

Làm cách nào để hiển thị HTML trong div?