nhập { Element } từ "domhandler/lib/node"

nhập phân tích cú pháp từ "html-react-parser"

nhập Hình ảnh từ "tiếp theo/hình ảnh"

tùy chọn const. HTMLReactParserOptions = {

if (domNode instanceof Element && domNode. tên === "img") {

const {src, alt, chiều rộng, chiều cao} = domNode. thuộc tính

src={`${tiến trình. env. NEXT_PUBLIC_DRUPAL_BASE_URL}/${src}`}

const { href, lớp. className } = domNode. thuộc tính

{domToReact(domNode. bọn trẻ)}

chức năng xuất Nội dung ({ giá trị }. { giá trị. chuỗi }) {

trả về <>{phân tích cú pháp (giá trị, tùy chọn)}

Gói npm kt-react-html-parser nhận được tổng cộng 27 lượt tải xuống mỗi tuần. Do đó, chúng tôi đã chấm điểm mức độ phổ biến của kt-react-html-parser là Hạn chế

Dựa trên số liệu thống kê dự án từ kho lưu trữ GitHub cho gói npm kt-react-html-parser, chúng tôi thấy rằng nó đã được gắn dấu sao?

Số lượt tải xuống được tính là trung bình động trong khoảng thời gian 12 tháng qua, không bao gồm các ngày cuối tuần và các điểm dữ liệu bị thiếu đã xác định

Trình phân tích cú pháp chuyển đổi một chuỗi HTML thành. Nếu bạn muốn với yếu tố tùy chỉnh của riêng mình, thì có một cách để làm điều đó

Ví dụ

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

MãSandbox. JSFiddle. thay thế. nó

Xem và ví dụ

Cài đặt

NPM

$ npm install html-react-parser --save

sợi

$ yarn add html-react-parser

giải nén (CDN)

Cách sử dụng

Cho rằng bạn đã nhập khẩu

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

9

// ES Modules
import parse from 'html-react-parser';

Phân tích cú pháp phần tử đơn

parse('
single
');

Phân tích nhiều phần tử

parse('
sibling 1
sibling 2
');

Vì trình phân tích cú pháp trả về một mảng cho các phần tử liền kề, hãy đảm bảo rằng nó được lồng bên dưới phần tử cha khi được hiển thị

________số 8

Phân tích các phần tử lồng nhau

parse('
text
');

Phân tích phần tử với các thuộc tính

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

0Tùy chọn

thay thế (domNode)

Phương thức

$ npm install html-react-parser --save

0 cho phép bạn hoán đổi một phần tử với phần tử React của riêng bạn

Đối số đầu tiên là

$ npm install html-react-parser --save

1―một đối tượng có cùng đầu ra như của htmlparser2

Phần tử chỉ được thay thế nếu phần tử React hợp lệ được trả về

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

1

Ví dụ sau sử dụng

$ npm install html-react-parser --save

0 để sửa đổi các phần tử con

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

2

Đầu ra

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

3

Ví dụ sau sử dụng

$ npm install html-react-parser --save

0 để loại trừ một phần tử

var parse = require('html-react-parser');
parse('
text
'); // equivalent to `React.createElement('div', {}, 'text')`

4Câu hỏi thường gặp

Thư viện XSS này có an toàn không?

Không, thư viện này không khử trùng XSS (Cross-Site Scripting). Xem #94

Các thẻ $ npm install html-react-parser --save4 có được phân tích cú pháp không?

Mặc dù các thẻ

$ npm install html-react-parser --save

4 được phân tích cú pháp, nhưng react-dom không hiển thị nội dung. Xem #98

Thuộc tính HTML của tôi không được gọi

Đó là bởi vì các trình xử lý sự kiện nội tuyến như

$ npm install html-react-parser --save

6 được phân tích cú pháp dưới dạng chuỗi thay vì hàm. Xem #73

Trình phân tích cú pháp HTML React có an toàn không?

Làm cách nào để chuyển đổi HTML sang React?