Trình phân tích cú pháp chuyển đổi một chuỗi HTML thành (các) phần tử React. Nếu bạn muốn thay thế một phần tử bằng phần tử tùy chỉnh của riêng mình, thì có một tùy chọn để thực hiện đ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 cách sử dụng 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ư domhandler 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

thay thế. (nút) => { nếu (nút. Tên. == 'a'. nút. loại. == 'thẻ'. . nút. trẻ em) trả về không xác định; . get(nút, 'attribs. href'); . href) trả về không xác định; . startedWith('/#def-')) { const Match = href. khớp (/\/#def-(. *)/); . get(matches, '1'); . docId) trả về không xác định; . bọn trẻ)} ); . startedWith('/#')) { const Match = href. trận đấu(/\/#(. *)/); . get(matches, '1'); . docId) trả về không xác định; . bọn trẻ)} );