programming html

Nhận HTML từ thành phần React

Đối với các dự án TypeScript, bạn có thể cần kiểm tra xem





  window.HTMLReactParser[/* string */];

2 có phải là phiên bản của





  window.HTMLReactParser[/* string */];

3 của domhandler không

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

Nếu bạn gặp sự cố, hãy xem ví dụ Tạo ứng dụng phản ứng của chúng tôi

thay thế phần tử và trẻ em

Thay thế phần tử và phần tử con của nó [xem demo]

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

đầu ra HTML

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

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

Chuyển đổi các thuộc tính DOM thành React props với





  window.HTMLReactParser[/* string */];

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

đầu ra HTML

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

thay thế và loại bỏ phần tử

Loại trừ một phần tử khỏi kết xuất bằng cách thay thế nó bằng





  window.HTMLReactParser[/* string */];

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

đầu ra HTML





  window.HTMLReactParser[/* string */];

thư viện

Tùy chọn





  window.HTMLReactParser[/* string */];

6 chỉ định thư viện giao diện người dùng. Thư viện mặc định là React

Để sử dụng Preact





  window.HTMLReactParser[/* string */];

Hoặc một thư viện tùy chỉnh





  window.HTMLReactParser[/* string */];

htmlparser2

Các tùy chọn
  window.HTMLReactParser[/* string */];
7 không hoạt động ở phía máy khách [trình duyệt] và chỉ hoạt động ở phía máy chủ [Node. js]. Bằng cách ghi đè các tùy chọn
  window.HTMLReactParser[/* string */];
7, hiển thị toàn cầu có thể phá vỡ

Tùy chọn htmlparser2 mặc định có thể được ghi đè trong >=0. 12. 0

Để kích hoạt





  window.HTMLReactParser[/* string */];





  window.HTMLReactParser[/* string */];

cắt tỉa

Theo mặc định, khoảng trắng được giữ nguyên





  window.HTMLReactParser[/* string */];

Nhưng một số yếu tố như





  window.HTMLReactParser[/* string */];

90 sẽ loại bỏ khoảng trắng không hợp lệ





  window.HTMLReactParser[/* string */];

Để xóa khoảng trắng, hãy bật tùy chọn

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





  window.HTMLReactParser[/* string */];

Tuy nhiên, khoảng trắng cố ý có thể bị loại bỏ





  window.HTMLReactParser[/* string */];

di cư

v3. 0. 0

domhandler đã được nâng cấp lên v5 nên một số tùy chọn trình phân tích cú pháp như





  window.HTMLReactParser[/* string */];

92 đã bị xóa

v2. 0. 0

kể từ v2. 0. 0, Internet Explorer [IE] không còn được hỗ trợ

v1. 0. 0

Các dự án TypeScript sẽ cần cập nhật các loại trong v1. 0. 0

Đối với tùy chọn

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

17, bạn có thể cần thực hiện các thao tác sau





  window.HTMLReactParser[/* string */];

kể từ v1. 1. 1, Internet Explorer 9 [IE9] không còn được hỗ trợ

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

XSS này có an toàn không?

Không, thư viện này không an toàn với XSS [tập lệnh chéo trang]. Xem #94

HTML không hợp lệ có được khử trùng không?

Không, thư viện này không làm sạch HTML. Xem #124, #125 và #141

Các thẻ

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

18 có được phân tích cú pháp không?

Mặc dù thẻ

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

18 và nội dung của chúng được hiển thị ở phía máy chủ nhưng chúng không được đánh giá ở phía máy khách. Xem #98

Các 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à do các trình xử lý sự kiện nội tuyến [e. g. ,





  window.HTMLReactParser[/* string */];

96] được phân tích cú pháp dưới dạng chuỗi chứ không phải hàm. Xem #73

Trình phân tích cú pháp đưa ra lỗi

Nếu trình phân tích cú pháp đưa ra lỗi, hãy kiểm tra xem các đối số của bạn có hợp lệ không. Xem "HTML không hợp lệ có được khử trùng không?"

SSR có được hỗ trợ không?

Có, hiển thị phía máy chủ trên Node. js được hỗ trợ bởi thư viện này. Xem bản trình diễn

Các phần tử không được lồng vào nhau một cách chính xác

Nếu các phần tử của bạn được lồng vào nhau không chính xác, hãy kiểm tra để đảm bảo đánh dấu HTML của bạn hợp lệ. Phân tích cú pháp HTML sang DOM sẽ bị ảnh hưởng nếu bạn đang sử dụng cú pháp tự đóng [





  window.HTMLReactParser[/* string */];

97] trên các phần tử không trống





  window.HTMLReactParser[/* string */];

Xem #158

Không thay đổi trường hợp của các thẻ

Các thẻ được viết thường theo mặc định. Để ngăn điều đó xảy ra, hãy chuyển tùy chọn htmlparser2

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

Cảnh báo. Bằng cách duy trì phân biệt chữ hoa chữ thường của các thẻ, bạn có thể nhận được các cảnh báo hiển thị như
const parse = require['html-react-parser'];
parse['Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
11

Xem #62 và ví dụ

TS lỗi. Thuộc tính 'attribs' không tồn tại trên loại 'DOMNode'

Lỗi TypeScript xảy ra vì





  window.HTMLReactParser[/* string */];

98 cần là một phiên bản của domhandler's





  window.HTMLReactParser[/* string */];

3. Xem di chuyển hoặc #199

Tôi có thể bật

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

19 cho một số thành phần nhất định không?

Có, bạn có thể bật hoặc tắt

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

19 cho một số thành phần nhất định bằng cách sử dụng tùy chọn

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

17. Xem #205

Cảnh báo xây dựng Webpack

Nếu bạn thấy cảnh báo xây dựng Webpack

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

Sau đó cập nhật cấu hình Webpack của bạn thành

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

Xem #238 và #213

Màn biểu diễn

Chạy điểm chuẩn

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

Đầu ra của điểm chuẩn chạy trên MacBook Pro 2017

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

Giới hạn kích thước chạy

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

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 mình. [Đó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ư là một phần của Đăng ký Tidelift

Những người duy trì trình phân tích cú pháp phản ứng html và hàng nghìn gói khác đang làm việc với Tidelift để cung cấp hỗ trợ thương mại và bảo trì cho các gói nguồn mở mà bạn sử dụng để xây dựng ứng dụng của mình. Tiết kiệm thời gian, giảm rủi ro và cải thiện tình trạng của mã, đồng thời trả tiền cho người bảo trì các gói chính xác mà bạn sử dụng. Tìm hiểu thêm

Làm cách nào để phân tích cú pháp nội dung HTML trong phản ứng JS?

html-reac-parser .

const parse = require['html-react-parser']; .

']; . createElement['p', {}, 'Xin chào, Thế giới. ']

npm cài đặt trình phân tích cú pháp phản ứng html --save

sợi thêm trình phân tích cú pháp phản ứng html

React có sử dụng HTML không?

React sử dụng cú pháp HTML-in-JavaScript được gọi là JSX [JavaScript và XML] . Sự quen thuộc với cả HTML và JavaScript sẽ giúp bạn tìm hiểu JSX và xác định rõ hơn liệu các lỗi trong ứng dụng của bạn có liên quan đến JavaScript hay miền cụ thể hơn của React hay không.

Phản ứng tạoRef[] là gì?

Các giới thiệu được tạo bằng React. createRef[] và gắn vào các phần tử React thông qua thuộc tính ref . Các tham chiếu thường được gán cho một thuộc tính thể hiện khi một thành phần được xây dựng để chúng có thể được tham chiếu trong toàn bộ thành phần. lớp MyComponent mở rộng React. Thành phần { hàm tạo [đạo cụ] { siêu [đạo cụ]; .

Chúng ta có thể sử dụng REF trong thành phần chức năng không?

Tạo giới thiệu . Thay vào đó, chúng tôi sử dụng useRef[null] để tạo ref trong các thành phần chức năng

thay thế phần tử và trẻ em

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

thay thế và loại bỏ phần tử

thư viện

htmlparser2

cắt tỉa

di cư

v3. 0. 0

v2. 0. 0

v1. 0. 0

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

XSS này có an toàn không?

HTML không hợp lệ có được khử trùng không?

Các thẻ const parse = require['html-react-parser']; parse['Hello, World!']; // React.createElement['p', {}, 'Hello, World!']18 có được phân tích cú pháp không?

Các thuộc tính không được gọi

Trình phân tích cú pháp đưa ra lỗi

SSR có được hỗ trợ không?

Các phần tử không được lồng vào nhau một cách chính xác

Không thay đổi trường hợp của các thẻ

TS lỗi. Thuộc tính 'attribs' không tồn tại trên loại 'DOMNode'

Tôi có thể bật const parse = require['html-react-parser']; parse['Hello, World!']; // React.createElement['p', {}, 'Hello, World!']19 cho một số thành phần nhất định không?

Cảnh báo xây dựng Webpack

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

cá nhân

tổ chức

doanh nghiệp

Làm cách nào để phân tích cú pháp nội dung HTML trong phản ứng JS?

React có sử dụng HTML không?

Phản ứng tạoRef[] là gì?

Chúng ta có thể sử dụng REF trong thành phần chức năng không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

Các thẻ
const parse = require['html-react-parser']; parse['
Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
18 có được phân tích cú pháp không?

Tôi có thể bật
const parse = require['html-react-parser']; parse['
Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
19 cho một số thành phần nhất định không?