Xóa phản ứng html

Bạn có thể sử dụng react-app-rewired https. //www. npmjs. com/package/react-app-rewired và ghi đè cấu hình thông qua ghi đè cấu hình. tập tin js

const {
  override,
  addBabelPresets,
  addBabelPlugins,
} = require('customize-cra');

module.exports = override(
  ...addBabelPresets([
    '@babel/preset-env',
    {
      modules: false,
      useBuiltIns: false,
      debug: false,
    },
  ]),
  ...addBabelPlugins(
    'babel-plugin-styled-components',
    'babel-plugin-jsx-remove-data-test-id',
  ),
);

Vì vậy, sai lầm của tôi là giả định rằng máy chủ của nhà phát triển là cùng một máy chủ mà gói bản dựng được cung cấp trên đó. Sai lâm lơn. Nói rõ hơn, điều này có nghĩa là khi tôi thực hiện việc xây dựng serve -, máy chủ được thiết lập bởi serve không có các tuyến đường được thiết lập để hiển thị các tệp tĩnh, mặc dù tôi đã làm đúng cách bằng cách sửa đổi máy chủ dev

Điều cuối cùng tôi làm là tạo một máy chủ tùy chỉnh (nhưng đơn giản). js đã phân phát gói xây dựng duy nhất, phân phát từng tệp tĩnh riêng biệt. Nó trông giống như thế này (mã được cung cấp trong trường hợp bất kỳ ai khác gặp phải vấn đề này)

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

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

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

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

4 của domhandler không

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

4

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

5

đầu ra HTML

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

6

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

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

5

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

7

đầu ra HTML

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

8

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

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

6

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

9

đầu ra HTML

npm install html-react-parser --save

0

thư viện

Tùy chọn

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

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

Để sử dụng Preact

npm install html-react-parser --save

1

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

npm install html-react-parser --save

2

htmlparser2

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

8 tùy chọn 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

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

8, kết xuất phổ quát có thể bị hỏng

Mặc định có thể được ghi đè trong >=0. 12. 0

Để kích hoạt

npm install html-react-parser --save

3

cắt tỉa

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

npm install html-react-parser --save

4

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

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

// CommonJS
const parse = require('html-react-parser');

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

npm install html-react-parser --save

5

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

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

0

npm install html-react-parser --save

6

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

npm install html-react-parser --save

7

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ư

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

// CommonJS
const parse = require('html-react-parser');

3 đã bị xóa

Ngoài ra, nên nâng cấp lên phiên bản TypeScript mới nhất

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

yarn add html-react-parser

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

npm install html-react-parser --save

8

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ẻ yarn add html-react-parser9 có được phân tích cú pháp không?

Mặc dù các thẻ

yarn add html-react-parser

9 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. ,

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

// CommonJS
const parse = require('html-react-parser');

7) được phân tích dưới dạng chuỗi thay vì 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. Thấy

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 (

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

// CommonJS
const parse = require('html-react-parser');

8) trên các phần tử không trống

npm install html-react-parser --save

9

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 chặn điều đó xảy ra, vượt qua

yarn add html-react-parser

0

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ư

yarn add html-react-parser

1

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ì

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

// CommonJS
const parse = require('html-react-parser');

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

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

4. Thấy hay #199

Tôi có thể kích hoạt 0 cho một số thành phần nhất định không?

Có, bạn có thể bật hoặc tắt một số thành phần nhất định bằng cách sử dụng tùy chọn. 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

yarn add html-react-parser

2

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

yarn add html-react-parser

3

Xem #238 và #213

lỗi đánh máy

Nếu bạn thấy lỗi TypeScript

yarn add html-react-parser

4

Sau đó nâng cấp lên phiên bản mới nhất của TypeScript. Xem #748

Hiệu suất

Chạy điểm chuẩn

yarn add html-react-parser

5

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

yarn add html-react-parser

6

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

yarn add html-react-parser

7

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 để xóa HTML khỏi chuỗi?

Làm cách nào để chuyển đổi HTML thành chuỗi trong React?

HTML có được sử dụng trong phản ứng JS không?

Làm cách nào để xóa thẻ HTML khỏi chuỗi trong JavaScript?