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 This is first column
8 This is second column
9
10
11 This is first column
12 This is second column
13
14
15 This is first column
16 This is second column
17
18
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
4 Render HTML using third party library :
5
6
7 {ReactHtmlParser[this.state.myContent]}
8
9 ];
10}
jsx
Trong ví dụ trên, có một phần
0 trong đó, bằng cách sử dụng chuỗi trạng thái, đánh dấu HTML được phân tích cú pháp. 1render[] {
2 return [
3
4 Render HTML using state string value :
5
6
7
8
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