Một cách nguy hiểmSetInnerHTML đối tượng đối tượng

Tìm hiểu cách sử dụng DangerlySetInnerHTML trong React, cùng với việc sử dụng nó với các thẻ script, không có thẻ div, các lựa chọn thay thế, v.v.

Chỉ để đề cập đến tất cả các tình huống sử dụng một cách nguy hiểmSetInnerHTML, hãy xem xét thêm hai ví dụ, một ví dụ sử dụng thẻ script và một không có phần tử div

ví dụ về thẻ script DangerlySetInnerHTML

export function exampleComponent() {
  const inlineScript = '(() => { console.log("Hello World!") })();'
  return (
    <script
      type="text/javascript"
      dangerouslySetInnerHTML={{ __html: inlineScript }}
    />
  )
}

Điều này bây giờ sẽ đăng nhập “Xin chào thế giới. ” bất cứ khi nào thẻ tập lệnh này được chạy

một cách nguy hiểmSetInnerHTML không có div ví dụ

export function exampleComponent() {
  const htmlString =
    "This is some HTML being set as a paragraph"
  return (
    <div>
      <h1> Hello World </h1>
      <p dangerouslySetInnerHTML={{ __html: htmlString }} />
    </div>
  )
}

Điều này bây giờ sẽ in đậm từ “HTML” bởi vì chúng tôi đang đặt HTML bên trong của phần tử p với chuỗi của chúng tôi với từ “HTML” được bao bọc trong một phần tử mạnh

Kết xuất HTML mà không cần nguy hiểmSetInnerHTML trong React

Để xem nhanh cách bạn có thể hiển thị HTML trong React mà không cần sử dụng DangerlySetInnerHTML, điều quan trọng là phải nhớ mục đích của React và cách sử dụng JSX

Khi sử dụng React, bất kỳ JSX nào bạn sử dụng sẽ được trả về và hiển thị dưới dạng HTML và do đó, nếu bạn muốn hiển thị HTML mà không có DangerlySetInnerHTML, bạn có thể và nên thực hiện điều đó trong JSX

Chỉ nên sử dụng một cách nguy hiểmSetInnerHTML khi bạn không có lựa chọn nào khác ngoài việc sử dụng nó. Nếu bạn có thể sử dụng JSX để xác định và hiển thị các phần tử HTML của mình thì bạn nên

Tại sao không có lựa chọn thay thế React nguy hiểmSetInnerHTML

Vấn đề tìm kiếm các lựa chọn thay thế chủ yếu đến từ việc đặt tên cho chỗ dựa này là dangerouslySetInnerHTML

Nghe có vẻ đáng lo ngại vì bạn biết mình đang làm điều gì đó nguy hiểm vì cái tên, nhưng thực ra nó không nguy hiểm như bạn cảm thấy hoặc nghe

Việc đặt tên cho DangerlySetInnerHTML là có chủ ý để cẩn thận khi sử dụng nó

Lý do tại sao dangerouslySetInnerHTML được gọi như vậy là vì một trong những mục đích sử dụng chính của chỗ dựa này là đặt HTML mà bạn nhận được từ một API và do đó bạn không có quyền kiểm soát

Điều này có nghĩa là nếu bạn đặt HTML từ một nguồn gốc khác, họ có thể gửi cho bạn HTML độc hại mà sau đó bạn sẽ đặt và chạy trong ứng dụng của mình, ứng dụng này có thể chạy JavaScript không xác định và hơn thế nữa, đó là một vấn đề

Tuy nhiên, nếu bạn tự tin rằng HTML này an toàn hoặc nếu HTML do bạn tự viết thì nó không thực sự nguy hiểm miễn là nó là HTML hợp lệ

Vì vậy, bạn có thể coi đó là một lời nhắc nhở để đảm bảo rằng bạn cẩn thận với nguồn của HTML khi sử dụng DangerlySetInnerHTML

Ngoài ra, có một giải pháp thay thế cho việc sử dụng DangerlySetInnerHTML, đó là chỉ đặt InternalHTML của một phần tử bằng cách sử dụng vanilla JS thay thế

Ví dụ thay thế Vanilla JavaScript

document.getElementsByTagName(‘p’)[0].innerHTML = "This is some HTML being set as a paragraph"

Tuy nhiên, việc đặt InternalHTML bằng cách sử dụng JavaScript vanilla như thế này không phải là lý tưởng trong ứng dụng React vì bằng cách đặt DangerlySetInnerHTML, bạn đang thông báo cho React không ghi đè lên HTML này trong bất kỳ bước chỉnh sửa hoặc kết xuất lại nào, điều này rất quan trọng nếu không bạn có thể mất html

Tóm lược

Ở đó chúng ta có cách sử dụng DangerlySetInnerHTML trong React, nếu bạn muốn nhiều hơn như thế này, hãy nhớ xem một số bài đăng khác của tôi

Một số đồ họa được sử dụng trong bài đăng này được tạo bằng các biểu tượng từ biểu tượng phẳng

Blog / Phản ứng

React Fragment - Mọi thứ bạn cần biết

Blog / Javascript

Cách đợi tất cả các lời hứa giải quyết trong JavaScript

Blog / Phản ứng

Mọi thứ bạn cần biết về React Keys

Blog / Phản ứng

Phản ứng. Mảnh so với div