Vào mã JSX và tôi đang sử dụng HTML-React-Parser. Tôi đã liên kết nó với HTML của mình như vậy:
Nó hoạt động tốt, nhưng vấn đề là khi tôi chạy nó, nó trả lại cho tôi một đối tượng như thế này:
Và tôi không thực sự chắc chắn phải làm gì với điều này. Tất cả những gì tôi thực sự cần là một chuỗi đơn giản. Mọi sự trợ giúp sẽ rất được trân trọng. Cảm ơn trước.
html-react-parser
Liberapay
HTMLReactParser(string[, options])Teepsring
Giấy phép
MIT
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.
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ử
- thư viện
- htmlparser2
- Cắt
- thay thế
- 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 vệ sinh không?
- Các thẻ yarn add html-react-parser5 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ể bật yarn add html-react-parser6 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
- Cá nhân
- Tổ chức
- Doanh nghiệp
- Ủng hộ
- Giấy phép
Cài đặt
NPM:
npm install html-react-parser --saveYarn:
yarn add html-react-parserCDN:
<!-- HTMLReactParser depends on React --> <script src="//unpkg.com/[email protected]/umd/react.production.min.js"></script> <script src="//unpkg.com/[email protected]/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>Cách sử dụng
Nhập hoặc yêu cầu mô -đun:
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');Phân tích phần tử đơn:
parse('<h2>single</h2>');Phân tích nhiều yếu tố:
parse('<li>Item 1</li><li>Item 2</li>');Đảm bảo hiển thị các phần tử liền kề được phân tích cú pháp trong phần tử cha:
<ul> {parse(` <li>Item 1</li> <li>Item 2</li> `)} </ul>Các yếu tố phân tích.
parse('<body><p>Lorem ipsum</p></body>');Phần tử phân tích cú pháp với các thuộc tính:
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')0thay thế
Tùy chọn yarn add html-react-parser4 cho phép bạn thay thế một phần tử bằng một phần tử khác.
Đối số đầu tiên của yarn add html-react-parser4 là nút của DomHandler:
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')1Đầu ra bảng điều khiển:
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')2Phần tử được thay thế nếu phần tử phản ứng hợp lệ được trả về:valid React element is returned:
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')3Thay thế bằng TypeScript
Đối với các dự án TypeScript, bạn có thể cần kiểm tra xem yarn add html-react-parser9 có phải là một thể hiện của <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/[email protected]/umd/react.production.min.js"></script> <script src="//unpkg.com/[email protected]/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>0 của Domhandler:
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')4Nếu bạn đang gặp sự cố, hãy xem ví dụ về ứng dụng Created React của chúng tôi.
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('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')5thay thế và xóa phần tử
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')6Thay 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('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')7thay thế và xóa phần tử
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')8thay thế và xóa phần tử
thư viện
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')9thay thế và xóa phần tử
thư viện
CắtReact.
Di cư
Câu hỏi thường gặpXSS này có an toàn không?
npm install html-react-parser --save1HTML không hợp lệ có được vệ sinh không?
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 overriding <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/[email protected]/umd/react.production.min.js"></script> <script src="//unpkg.com/[email protected]/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>4 options, universal rendering can break.
Thuộc tính không được gọi
Trình phân tích cú pháp ném lỗi
npm install html-react-parser --save2Cắt
Di cư
npm install html-react-parser --save3Câu hỏi thường gặp
npm install html-react-parser --save4XSS này có an toàn không?
npm install html-react-parser --save5HTML không hợp lệ có được vệ sinh không?
npm install html-react-parser --save6Các thẻ yarn add html-react-parser5 có được phân tích cú pháp không?
v3.0.0
Thuộc tính không được gọi
v2.0.0
Trình phân tích cú pháp ném lỗi
v1.0.0
SSR có được hỗ trợ không?
Các yếu tố không được lồng chính xác
npm install html-react-parser --save7Khô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'
XSS này có an toàn không?
HTML không hợp lệ có được vệ sinh không?not XSS (cross-site scripting) safe. See #94.
HTML không hợp lệ có được vệ sinh không?
Các thẻ yarn add html-react-parser5 có được phân tích cú pháp không?not sanitize HTML. See #124, #125, and #141.
Thuộc tính không được gọi
Trình phân tích cú pháp ném lỗi
Thuộc tính không được gọi
Trình phân tích cú pháp ném lỗi
Trình phân tích cú pháp ném lỗi
SSR có được hỗ trợ không?
SSR có được hỗ trợ không?
Các yếu tố không được lồng chính xác
Các yếu tố không được lồng chính xác
Không thay đổi trường hợp thẻ
npm install html-react-parser --save8Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
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'
npm install html-react-parser --save9Tôi có thể bật yarn add html-react-parser6 cho các yếu tố nhất định không?: By preserving case-sensitivity of the tags, you may get rendering warnings like:
yarn add html-react-parser0
Webpack xây dựng cảnh báo
Lỗi TS: Thuộc tính 'Attribs' không tồn tại trên loại 'domnode'
Tôi có thể bật yarn add html-react-parser6 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
Webpack xây dựng cảnh báo
Màn biểu diễn
yarn add html-react-parser1Người đóng góp
yarn add html-react-parser2Người đóng góp mã
Màn biểu diễn
Người đóng góp
Người đóng góp mã
yarn add html-react-parser3Giớ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