html-react-parser
Nội phân chính
Nội phân chính
- html-react-parser
- htmlparser2
- XSS này có an toàn không?
- HTML không hợp lệ có được vệ sinh không?
- Thẻ có được phân tích cú pháp không?
- Thuộc tính không được gọi
- Trình phân tích cú pháp ném lỗi
- SSR có được hỗ trợ không?
- Các yếu tố không được lồng chính xác
- Không thay đổi trường hợp thẻ
- Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
- Tôi có thể kích hoạt trang trí cho các yếu tố nhất định không?
- Webpack xây dựng cảnh báo
- Màn biểu diễn
- Người đóng góp
- Người đóng góp mã
- Người đóng góp tài chính
Nội phân chính
- html-react-parser
- htmlparser2
- XSS này có an toàn không?
- HTML không hợp lệ có được vệ sinh không?
- Thẻ có được phân tích cú pháp không?
- Thuộc tính không được gọi
- Trình phân tích cú pháp ném lỗi
- SSR có được hỗ trợ không?
- Các yếu tố không được lồng chính xác
- Không thay đổi trường hợp thẻ
- Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
- Tôi có thể kích hoạt trang trí cho các yếu tố nhất định không?
- Webpack xây dựng cảnh báo
- Màn biểu diễn
- Người đóng góp
- Người đóng góp mã
- Người đóng góp tài chính
- html-react-parser
- htmlparser2
- XSS này có an toàn không?
- HTML không hợp lệ có được vệ sinh không?
- Thẻ có được phân tích cú pháp không?
- Thuộc tính không được gọi
- Trình phân tích cú pháp ném lỗi
- SSR có được hỗ trợ không?
- Các yếu tố không được lồng chính xác
- Không thay đổi trường hợp thẻ
- Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
- Tôi có thể kích hoạt trang trí cho các yếu tố nhất định không?
- Webpack xây dựng cảnh báo
- Màn biểu diễn
- Người đóng góp
- Người đóng góp mã
- Người đóng góp tài chính
XSS này có an toàn không?
HTMLReactParser[string[, options]]
HTML để phản ứng phân tích cú pháp hoạt động trên cả máy chủ [Node.js] và máy khách [trình duyệt]:
Trình phân tích cú pháp chuyển đổi một chuỗi HTML thành một hoặc nhiều phần tử phản ứng.
Để thay thế một phần tử bằng một phần tử khác, hãy xem tùy chọn yarn add html-react-parser
4.
const parse = require['html-react-parser']; parse['Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thí dụ
Sao chép | JSfiddle | CodeSandbox | TypeScript | Ví dụ- Mục lục
- Cài đặt
- Cách sử dụng
- thay thế
- Thay thế bằng TypeScript
- Thay thế yếu tố và trẻ em
- Thay thế các thuộc tính phần tử
- thay thế và xóa phần tử
- htmlparser2
- thư viện
- Cách sử dụng
- Cắt
- v3.0.0
- v2.0.0
- v1.0.0
- Di cư
- XSS này có an toàn không?
- HTML không hợp lệ có được vệ sinh không?
- Câu hỏi thường gặp
- Thuộc tính không được gọi
- Trình phân tích cú pháp ném lỗi
- SSR có được hỗ trợ không?
- Các yếu tố không được lồng chính xác
- Không thay đổi trường hợp thẻ
- Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
- Tôi có thể kích hoạt trang trí cho các yếu tố nhất định không?
- Webpack xây dựng cảnh báo
- Màn biểu diễn
- Người đóng góp
- Người đóng góp mã
- Người đóng góp tài chính
- XSS này có an toàn không?
- HTML để phản ứng phân tích cú pháp hoạt động trên cả máy chủ [Node.js] và máy khách [trình duyệt]:
- Trình phân tích cú pháp chuyển đổi một chuỗi HTML thành một hoặc nhiều phần tử phản ứng.
- Để thay thế một phần tử bằng một phần tử khác, hãy xem tùy chọn
yarn add html-react-parser
4. - Thí dụ
Mục lục
NPM:
npm install html-react-parser --save
Yarn:
yarn add html-react-parser
CDN:
window.HTMLReactParser[/* string */];
Cài đặt
Cách sử dụng
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require['html-react-parser'];
thay thế
parse['single
'];
Thay thế bằng TypeScript
parse['Item 1 Item 2 '];
Thay thế yếu tố và trẻ em
{parse[`Item 1 Item 2 `]}
Thay thế các thuộc tính phần tử
parse['Lorem ipsum
'];
thay thế và xóa phần tử
const parse = require['html-react-parser']; parse['0Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
thư viện
Cắt
Di cư
const parse = require['html-react-parser']; parse['1Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Câu hỏi thường gặp
const parse = require['html-react-parser']; parse['2Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Các thẻ
yarn add html-react-parser5 có được phân tích cú pháp không?valid React element is returned:
const parse = require['html-react-parser']; parse['3Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
thay thế
Thay thế bằng TypeScript
const parse = require['html-react-parser']; parse['4Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế yếu tố và trẻ em
Thay thế bằng TypeScript
Thay thế yếu tố và trẻ em
const parse = require['html-react-parser']; parse['5Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế các thuộc tính phần tử
const parse = require['html-react-parser']; parse['6Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế yếu tố và trẻ em
Thay thế các thuộc tính phần tử
const parse = require['html-react-parser']; parse['7Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế các thuộc tính phần tử
const parse = require['html-react-parser']; parse['8Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế các thuộc tính phần tử
thay thế và xóa phần tử
const parse = require['html-react-parser']; parse['9Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Thay thế các thuộc tính phần tử
thay thế và xóa phần tử
thư việnReact.
Cắt
npm install html-react-parser --save0
Di cư
npm install html-react-parser --save1
Câu hỏi thường gặp
Các thẻ
yarn add html-react-parser5 có được phân tích cú pháp không?do not work on the client-side [browser] and only works on the server-side [Node.js]. By overridingwindow.HTMLReactParser[/* string */];4 options, universal rendering can break.
Tôi có thể bật
yarn add html-react-parser6 cho các yếu tố nhất định không?
Người đóng góp
npm install html-react-parser --save2
thư viện
Cắt
npm install html-react-parser --save3
Di cư
npm install html-react-parser --save4
Câu hỏi thường gặp
npm install html-react-parser --save5
Các thẻ
yarn add html-react-parser5 có được phân tích cú pháp không?
npm install html-react-parser --save6
Tôi có thể bật yarn add html-react-parser
6 cho các yếu tố nhất định không?
v3.0.0
Người đóng góp
v2.0.0
Người đóng góp tài chính
v1.0.0
Cá nhân
Tổ chức
npm install html-react-parser --save7
Doanh nghiệp
Ủng hộ
XSS này có an toàn không?
Giấy phépnot XSS [cross-site scripting] safe. See #94.
HTML không hợp lệ có được vệ sinh không?
Cách sử dụngnot sanitize HTML. See #124, #125, and #141.
Thẻ có được phân tích cú pháp không?
Mặc dù các thẻ
yarn add html-react-parser5 và nội dung của chúng được hiển thị ở phía máy chủ, chúng không được đánh giá ở phía máy khách. Xem #98.
Thuộc tính không được gọi
Lý do tại sao các thuộc tính HTML của bạn không được gọi là vì trình xử lý sự kiện nội tuyến [ví dụ:
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require['html-react-parser'];2] được phân tích cú pháp như một chuỗi chứ không phải là một hàm. Xem #73.
Trình phân tích cú pháp ném lỗi
Nếu trình phân tích cú pháp ném erorr, hãy kiểm tra xem đối số của bạn có hợp lệ không. Xem "HTML không hợp lệ bị khử trùng?".
SSR có được hỗ trợ không?
Có, kết xuất phía máy chủ trên Node.js được hỗ trợ bởi thư viện này. Xem bản demo.
Các yếu tố không được lồng chính xác
Nếu các phần tử của bạn được lồng không chính xác, hãy kiểm tra để đảm bảo đánh dấu HTML của bạn là hợp lệ. Việc phân tích cú pháp HTML đến DOM sẽ bị ảnh hưởng nếu bạn đang sử dụng cú pháp tự đóng [
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require['html-react-parser'];3] trên các phần tử không độc hại:
npm install html-react-parser --save8
Xem #158.
Không thay đổi trường hợp thẻ
Thẻ được thấp hơn theo mặc định. Để ngăn chặn điều đó xảy ra, hãy vượt qua tùy chọn HTMLPARSER2:
npm install html-react-parser --save9
CẢNH BÁO: Bằng cách bảo tồn độ nhạy trường hợp của các thẻ, bạn có thể nhận được cảnh báo kết xuất như:: By preserving case-sensitivity of the tags, you may get rendering warnings like:
yarn add html-react-parser0
Xem #62 và ví dụ.
Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
Lỗi TypeScript xảy ra do
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require['html-react-parser'];4 cần là một thể hiện của
window.HTMLReactParser[/* string */];0 của Domhandler. Xem di cư hoặc #199.
Tôi có thể kích hoạt trang trí cho các yếu tố nhất định không?
Có, bạn có thể bật hoặc vô hiệu hóa
yarn add html-react-parser6 cho các yếu tố nhất định bằng tùy chọn
yarn add html-react-parser4. Xem #205.
Webpack xây dựng cảnh báo
Nếu bạn thấy cảnh báo xây dựng trang web:
yarn add html-react-parser1
Sau đó, cập nhật cấu hình webpack của bạn lên:
yarn add html-react-parser2
Xem #238 và #213.
Màn biểu diễn
Chạy điểm chuẩn:
Đầu ra của điểm chuẩn chạy trên MacBook Pro 2017:
yarn add html-react-parser3
Giới hạn kích thước chạy:
Người đóng góp
Người đóng góp mã
Dự án này tồn tại nhờ tất cả những người đóng góp. [Đóng góp].
Người đóng góp tài chính
Trở thành người đóng góp tài chính và giúp chúng tôi duy trì cộng đồng của chúng tôi. [Đóng góp]
Cá nhân
Tổ chức
Hỗ trợ dự án này với tổ chức của bạn. Logo của bạn sẽ hiển thị ở đây với một liên kết đến trang web của bạn. [Đóng góp]
Doanh nghiệp
Có sẵn như một phần của đăng ký Tidelift.
Người bảo trì HTML-Reac-Parser và hàng ngàn gói khác đang làm việc với Tidelift để cung cấp hỗ trợ và bảo trì thương mại cho các gói nguồn mở mà bạn sử dụng để xây dựng các ứng dụng của mình. Tiết kiệm thời gian, giảm rủi ro và cải thiện sức khỏe của mã, trong khi trả cho người bảo trì các gói chính xác bạn sử dụng. Tìm hiểu thêm.
Ủng hộ
- Nhà tài trợ GitHub
- Mở tập thể
- TIDELIFT
- Patreon
- Ko-fi
- Liberapay
- Teepsring
Giấy phép
MIT