programming html

Trình phân tích cú pháp HTML phản ứng có an toàn không?

Và bạn muốn chuyển đổi nó thành các phần tử React. Tất nhiên trong JSX nếu chúng ta chỉ thay backticks [

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

0] bằng dấu ngoặc đơn [

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

1] thì chúng ta sẽ tự động lấy cây đối tượng phần tử React được gán cho

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

2. Nhưng chúng ta đang nói về trường hợp bạn có một chuỗi HTML đơn giản/thô từ đâu đó và muốn chuyển đổi chuỗi đó thành một hoặc nhiều phần tử React. Hãy nói một chút về việc hiển thị HTML thô và sau đó chúng ta sẽ quay lại phần chuyển đổi

Nếu chúng tôi chỉ muốn hiển thị chuỗi HTML, chúng tôi có thể sử dụng tính năng

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

function Component[] {
  const htmlString = '...';
  return ; 
}

Thành phần trên sẽ trả về và hiển thị một phần tử React đại diện cho một

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

4 với

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

2 được đặt bên trong nó khi còn nhỏ. Tên tính năng hoặc thuộc tính để đưa vào chuỗi HTML thô là

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

3 vì việc đưa HTML trực tiếp vào trang web của bạn có thể dễ bị tấn công XSS. Về cơ bản, nếu HTML đến từ một nguồn không đáng tin cậy, nó có thể chứa mã JavaScript độc hại sẽ chạy trên trình duyệt của người dùng với khả năng gây ra sự tàn phá.

Chúng ta có thể giải quyết vấn đề XSS không?

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

Có một điều nhỏ bạn sẽ nhận thấy ở đây. Khi sử dụng

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

3, chuỗi HTML sẽ được chèn vào DOM sẽ luôn được bao bọc bởi phần tử chứa thuộc tính nguy hiểm. Trong trường hợp này, phần tử bao bọc đó là

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

4. Có thể có khả năng bạn không muốn nó. Một yêu cầu cốt lõi

Nếu bạn có yêu cầu này hoặc thay vì xử lý các chuỗi, bạn muốn xử lý các đối tượng phần tử React vì bất kỳ lý do gì [có quyền truy cập trực tiếp vào các thuộc tính HTML, mã JS của bạn là mã tốt], thì chúng ta sẽ phải sử dụng “trình phân tích cú pháp . Quay lại nơi chúng ta bắt đầu – chuyển đổi chuỗi HTML thành các phần tử React

Chúng tôi sẽ cần một trình phân tích cú pháp có thể lấy chuỗi HTML làm đầu vào và đưa ra các phần tử React làm đầu ra. Có một vài tùy chọn [gói của bên thứ ba] mà chúng tôi có thể sử dụng

html-reac-phân tích cú pháp
html-để-phản ứng
phản ứng-html-phân tích cú pháp

Hãy chọn ngẫu nhiên

function Component[] {
  const htmlString = '...';
  return ; 
}

4 [hiện có lượt tải xuống hàng tuần cao nhất] và xem cách sử dụng của nó

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

Thực sự dễ sử dụng. Các thư viện này có làm sạch HTML không? . Do đó, nếu bạn cần vệ sinh thì cũng có thể sử dụng

function Component[] {
  const htmlString = '...';
  return ; 
}

6 tại đây

Đoạn mã quan trọng duy nhất trong ví dụ trên thực hiện phân tích cú pháp và chuyển đổi là hàm

function Component[] {
  const htmlString = '...';
  return ; 
}

7 trả về phần tử React [cây]. Về cơ bản

parse['Hello, World!'];
// returns
React.createElement['p', {}, 'Hello, World!']

Một trong những lợi thế lớn nhất của việc sử dụng các phần tử thông qua các trình phân tích cú pháp này so với HTML thô thông qua

import parse from 'html-react-parser';

function Component[] {
  const htmlString = '...';
  const reactElement = parse[htmlString];

  return reactElement;
}

3 là, phần tử trước đây trở thành một phần của cây React dẫn đến sự điều hòa hiệu quả hoặc sự khác biệt của DOM. Giống như cái sau, React không bao giờ có thể cập nhật đúng những gì được yêu cầu, nó phải luôn thay thế toàn bộ HTML để đưa các thay đổi vào DOM

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ụ

________số 8

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

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

giải nén [CDN]

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

1Cách sử dụng

Cho rằng bạn đã nhập

var parse = require['html-react-parser'];
parse['text
']; // equivalent to `React.createElement['div', {}, 'text']`

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

Phân tích cú pháp phần tử đơn

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

Phân tích nhiều phần tử

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

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ị

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

Phân tích các phần tử lồng nhau

import DOMPurify from 'dompurify';

function Component[] {
  const htmlString = ...;
  return ; 
}

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']`

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']`

Đầu ra

var parse = require['html-react-parser'];
parse['text
']; // equivalent to `React.createElement['div', {}, 'text']`

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

4 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 một chuỗi thay vì một hàm. Xem #73

Phân tích cú pháp trong React là gì?

React Parse là một tập hợp các hành động và trình theo dõi saga giúp bạn dễ dàng Lấy, ĐĂNG, ĐẶT, XÓA dữ liệu trên máy chủ .

Làm cách nào để chuyển đổi HTML sang React?

Các bước chuyển đổi trang web HTML sang React JS .

Bước 1. Biến các trang thành các thành phần. Khi chuyển website HTML sang React JS, bạn cần biến trang web thành component. .

Bước 2. Sửa lỗi cú pháp. .

Bước 3. Thêm CSS. .

Bước 4. phụ thuộc. .

Bước 5. Phân hủy trang

thay thế [domNode]

Thư viện XSS này có an toàn không?

Các thẻ $ npm install html-react-parser --save4 có được phân tích cú pháp không?

Thuộc tính HTML của tôi không được gọi

Phân tích cú pháp trong React là gì?

Làm cách nào để chuyển đổi HTML sang React?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

Các thẻ
$ npm install html-react-parser --save
4 có được phân tích cú pháp không?