Hướng dẫn react-html-parser transform example - Ví dụ về biến đổi react-html-parser

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ụ

• 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ắ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:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

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

<ul>
  {parse(`
    
Item 1
    
Item 2
  `)}
</ul>

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('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thư viện

Cắt

Di cư

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

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

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Các thẻ

yarn add html-react-parser

const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

thay thế

Thay thế bằng TypeScript

const parse = require('html-react-parser');
parse('
Hello, 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('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Thay thế các thuộc tính phần tử

const parse = require('html-react-parser');
parse('
Hello, 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('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

Thay thế các thuộc tính phần tử

const parse = require('html-react-parser');
parse('
Hello, 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('
Hello, 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 --save

Di cư

npm install html-react-parser --save

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

Các thẻ

yarn add html-react-parser

5 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 overriding

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

4 options, universal rendering can break.

Tôi có thể bật

yarn add html-react-parser

Người đóng góp

npm install html-react-parser --save

thư viện

Cắt

npm install html-react-parser --save

Di cư

npm install html-react-parser --save

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

npm install html-react-parser --save

Các thẻ

yarn add html-react-parser

npm install html-react-parser --save

Tôi có thể bật yarn add html-react-parser6 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 --save

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-parser

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');

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');

npm install html-react-parser --save

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 --save

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-parser

0

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');

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
<script>
  window.HTMLReactParser(/* string */);
script>

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-parser

yarn add html-react-parser

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-parser

Sau đó, cập nhật cấu hình webpack của bạn lên:

yarn add html-react-parser

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-parser

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