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 [
]
}
Đ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 [
Hello World
]
}
Đ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ó giải pháp thay thế nguy hiểmSetInnerHTML React
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 có vẻ như vậy.
Việc đặt tên cho DangerlySetInnerHTML là do nhóm React cố ý như một lời nhắc nhở bạn 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à thiết lập 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 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 vanilla JavaScript 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
Bản tóm tắt
Ở đó 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
Tôi hy vọng bài đăng này hữu ích, nhưng trước khi bạn tiếp tục, hãy đảm bảo rằng bạn đã thử bài kiểm tra tương tác thú vị của tôi để xem bạn là kỹ sư React mới vào nghề, trung cấp hay chuyên gia
Sẽ chỉ mất khoảng 1 - 3 phút, vì vậy bạn không có gì để mất, hãy kiểm tra khả năng của mình ngay bây giờ
làm bài kiểm tra
Bạn là kỹ sư phản ứng mới, trung cấp hay chuyên gia?
Tìm hiểu tại đây bằng cách làm bài kiểm tra nhanh, tương tác, vui nhộn của tôi, mất khoảng 1 - 3 phút. Bạn sẽ làm tốt đến mức nào?
làm bài kiểm traMộ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
Bài đăng này sẽ bao gồm mọi thứ bạn cần biết về React Fragment một cách rõ ràng và ngắn gọn và sẽ là nguồn tài nguyên cuối cùng cho bất kỳ truy vấn nào liên quan đến React Fragment
Will Mayger
Ngày 24 tháng 3 năm 2022
Bài báo
Blog / Javascript
Cách đợi tất cả các lời hứa giải quyết trong JavaScript
Bài đăng này sẽ đề cập đến cách đợi tất cả các lời hứa giải quyết trong JavaScript thay vì phải thực hiện từng lời hứa khi bạn có nhiều lời hứa cần giải quyết
Will Mayger
21 Tháng Ba, 2022
Bài báo
Blog / Phản ứng
Mọi thứ bạn cần biết về React Keys
Trong hướng dẫn này, bạn sẽ khám phá mọi thứ bạn cần biết về React Keys để có thể sử dụng chúng đúng cách trong bất kỳ ứng dụng React nào cùng với thông tin chi tiết
Will Mayger
03 Tháng Ba, 2022
Bài báo
Blog / Phản ứng
Phản ứng. Mảnh so với div
Trong bài đăng này, chúng tôi đề cập đến sự khác biệt giữa, React. Phân đoạn so với div, lợi ích của một phân đoạn và khi nào bạn nên sử dụng cái này hơn cái kia