Làm cách nào để phân tích cú pháp HTML trong chuỗi React?

Trong hướng dẫn này, chúng ta sẽ xem cách hiển thị chuỗi HTML trong thành phần React

Hầu hết trình soạn thảo văn bản đa dạng thức cho phản ứng đều sử dụng html để định dạng. Vì vậy, dữ liệu trong trình soạn thảo văn bản được lưu dưới dạng chuỗi

"
some dummy data"

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi không thể hiển thị trực tiếp chuỗi này, các thẻ html cũng sẽ được coi là chuỗi thô

Giải pháp đơn giản nhất cho việc này là sử dụng một cách nguy hiểmSetInnerHTML

<div dangerouslySetInnerHTML={{ __html: "
some data " }} />

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

bằng cách sử dụng DangerlySetInnerHTML, toàn bộ html trong chuỗi được giữ nguyên.
Một cách khác là sử dụng thư viện html-react-parser.

Thích bài đăng này?
Twitter của chúng tôi. @job_pick
Trang web của chúng tôi. tuyển dụng. trong

Làm việc với JSON đủ lâu, bạn có nhiều khả năng bắt gặp một tập dữ liệu có HTML được nhúng trong một chuỗi dưới dạng một trong các trường. Nếu bạn muốn có thể hiển thị dữ liệu này trong React. js đồng thời tính đến kiểu dáng của HTML bên trong, có một gói dễ sử dụng có tên React HTML Parser sẽ xử lý công việc cho bạn

Nếu bạn muốn hiển thị mã HTML lưu trữ dưới dạng một chuỗi trong một biến chuỗi, trước tiên, bạn phải chuyển chuỗi đó sang HTML. Tôi thảo luận về hai cách để chuyển đổi chuỗi thành HTML trong bài viết này

1. Sử dụng nguy hiểmSetInnerHTML của React
2. Sử dụng gói npm html-Reac-Parser

Đây là một ví dụ về những gì sẽ xảy ra nếu tôi hiển thị HTML được lưu trữ trong một biến chuỗi. Nội dung hiển thị như nó là. Điều đó tương tự như phương thức InternalText của Javascript

import { useEffect, useState } from "react";
export const StringToHtml = () =>{
  const [html, setHtml] = useState("")
  useEffect(() => {
    setHtml("
Html stored as a string
")
  }, [html])
  return(
      
{html}
  )
}

Hình 1. Phản ứng kết xuất chuỗi html

Sử dụng nguy hiểmSetInnerHTML của React

Tuy nhiên, React Js cố tình làm điều này. Nó ngăn chặn XSS (kịch bản chéo trang). Do đó, các nhà thiết kế React Js đã đặt tên cho phương thức cho phép bạn phân tích cú pháp một chuỗi thành HTML là DangerlySetInnerHTML. Đây là cách sử dụng nó. Không sử dụng nguy hiểmSetInnerHTML để hiển thị HTML có nguồn gốc từ các nguồn không đáng tin cậy. Chúng có thể chứa XSS nhắm mục tiêu người dùng cuối

import { useEffect, useState } from "react";
export const StringToHtml = () =>{
  const [html, setHtml] = useState("")
  useEffect(() => {
    setHtml("
Html stored as a string
")
  }, [html])
  return(
      

  )
}

Hình 2. Phản ứng Js một cách nguy hiểmSetInnerHTML

Sử dụng gói npm html-Reac-Parser

Nếu bạn cần nhiều tính năng hơn như hiển thị có điều kiện, nối thêm, thay thế, v.v. , gói NPM html-react-parser có thể xử lý hầu hết chúng

Bây giờ, bạn có thể thấy rằng bảng được hình thành từ giá trị trạng thái và được hiển thị trên màn hình như hình bên dưới

Đây là cách sử dụng thuộc tính

<div dangerouslySetInnerHTML={{ __html: "
some data " }} />

2 .

Lưu ý rằng bạn không nên sử dụng thuộc tính này trừ khi bạn cần hiển thị nội dung tĩnh vì nó thu hút cuộc tấn công tập lệnh chéo trang, đây không phải là môi trường phù hợp cho bất kỳ ứng dụng web nào

Sử dụng thư viện của bên thứ ba

Bạn đã học được cách tiếp cận đơn giản để phân tích các giá trị trạng thái bằng cách sử dụng

<div dangerouslySetInnerHTML={{ __html: "
some data " }} />

2 . Bạn cũng có thể sử dụng thư viện của bên thứ ba để có chức năng tương tự. Có một số thư viện có sẵn có thể phân tích các giá trị này.

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

Trong hướng dẫn này, bạn sẽ tìm hiểu về phân tích cú pháp HTML bằng thư viện ______43 . Để sử dụng thư viện, hãy cài đặt nó bằng lệnh

1render() {
2    return (
3      <div>
4        <span>Render HTML using state string value :span>
5        <br />
6        <br />
7        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
8      div>
9    );
10}

4 bên dưới.

1npm install react-html-parser

vỏ bọc quyền lực

Sau khi cài đặt thư viện, hãy nhập nó như hình bên dưới

1import ReactHtmlParser from "react-html-parser";

jsx

Bây giờ bạn có thể sử dụng thư viện để hiển thị cùng một đánh dấu HTML mà chúng tôi đã sử dụng trong ví dụ trên

________số 8

jsx

Bây giờ bạn có giá trị trạng thái dưới dạng nội dung đánh dấu, bước tiếp theo là sử dụng thư viện và phân tích cú pháp HTML

1render() {
2    return (
3      <div>
4        <span>Render HTML using third party library :span>
5        <br />
6        <br />
7        <div>{ReactHtmlParser(this.state.myContent)}div>
8      div>
9    );
10}

jsx

Trong ví dụ trên, có một phần

1render() {
2    return (
3      <div>
4        <span>Render HTML using state string value :span>
5        <br />
6        <br />
7        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
8      div>
9    );
10}

0 trong đó, bằng cách sử dụng chuỗi trạng thái, phần đánh dấu HTML được phân tích cú pháp.

Hàm được sử dụng là

1render() {
2    return (
3      <div>
4        <span>Render HTML using state string value :span>
5        <br />
6        <br />
7        <div dangerouslySetInnerHTML={{ __html: this.state.myContent }} />
8      div>
9    );
10}

6 , hàm này chấp nhận giá trị trạng thái dưới dạng chuỗi và sẽ chuyển đổi thành HTML trong quá trình hiển thị.

Vì vậy, khi bạn thực thi ứng dụng, bạn có thể thấy rằng HTML dự kiến ​​đã được hiển thị và đưa ra kết quả mong muốn

Phần kết luận

Phân tích cú pháp HTML là một nhiệm vụ quan trọng liên quan đến việc hiển thị nội dung HTML dựa trên các yêu cầu khác nhau, như sử dụng giá trị đến từ đối tượng trạng thái

Làm cách nào để chuyển đổi HTML thành văn bản trong phản ứng JS?

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

Tại sao nên sử dụng trình phân tích cú pháp HTML React?

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