Thuộc tính nào là thay thế Reacts để sử dụng InternalHTML trong DOM của trình duyệt?

Ví dụ

Nhận nội dung HTML của một phần tử với id="myP"

hãy để html = tài liệu. getElementById("myP"). bên trongHTML;

Tự mình thử »

Thay đổi nội dung HTML của một phần tử với id="demo"

tài liệu. getElementById("bản trình diễn"). innerHTML = "Tôi đã thay đổi. “;

Tự mình thử »

Lấy nội dung HTML của một

phần tử có id="myList"

hãy để html = tài liệu. getElementById("myList"). bên trongHTML;

Tự mình thử »

Xóa nội dung HTML của một

phần tử có id="demo"

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Thuộc tính innerHTML đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử

Sự khác biệt giữainnerHTML, văn bản bên trong và nội dung văn bản

Xem bên dưới

---

cú pháp

Trả về thuộc tính InternalHTML

Đặt thuộc tính InternalHTML

Giá trị tài sản

Thuộc tínhMô tảStringNội dung HTML

Giá trị trả về

TypeDescriptionStringNội dung HTML của phần tử

---

---

Thêm ví dụ

Ví dụ

Thay đổi nội dung HTML của hai phần tử

let text = "Xin chào Dolly. ";
tài liệu. getElementById("myP"). innerHTML = văn bản;
tài liệu. getElementById("myDIV"). InternalHTML = văn bản;

Tự mình thử »

Ví dụ

Lặp lại nội dung HTML của một phần tử

thành phần. phần tử bên trongHTML +=. bên trongHTML;

Tự mình thử »

Ví dụ

Thay đổi nội dung HTML và URL của một liên kết

. innerHTML = "W3Schools";
phần tử. href = "https. //www. w3schools. com";

Tự mình thử »

---

Sự khác biệt giữainnerHTML, văn bản bên trong và nội dung văn bản

Thuộc tính innerHTML trả về.
Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và thẻ HTML bên trong. Thuộc tính InternalText trả về.
Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có thẻ và khoảng cách văn bản ẩn CSS, ngoại trừ

Hướng dẫn này giải thích cách sử dụng thuộc tính phản ứng nguy hiểm SetInnerHTML bên trong thành phần ứng dụng phản ứng. dangerouslySetInnerHTML là sự thay thế của React cho việc sử dụng InternalHTML trong DOM của trình duyệt. Nói chung, việc đặt HTML từ mã là rủi ro vì rất dễ khiến người dùng của bạn vô tình bị tấn công bằng tập lệnh chéo trang (XSS). Vì vậy, bạn có thể đặt HTML trực tiếp từ React, nhưng bạn phải nhập DangerlySetInnerHTML và chuyển một đối tượng bằng khóa __html, để nhắc nhở bản thân rằng điều đó nguy hiểm.

LƯU Ý. Việc sử dụng InternalHTML không đúng cách có thể khiến bạn bị tấn công bằng tập lệnh chéo trang (XSS). Vệ sinh đầu vào của người dùng để hiển thị nổi tiếng là dễ xảy ra lỗi và việc không vệ sinh đúng cách là một trong những nguyên nhân hàng đầu gây ra lỗ hổng web trên internet.

Hãy xem các ví dụ bên dưới về thuộc tính nguy hiểmSetInnerHTML.

Ví dụ -1.

Trong ví dụ này, chúng tôi chỉ hiển thị văn bản bằng thuộc tính nguy hiểmSetInnerHTML.

______0
Đầu ra.
----------------------

Ví dụ -2.

In this example, we are simply displaying text and link using dangerouslySetInnerHTML attribute.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// covert urls to clickable link
function textToLink(text) {
  var finalText = text
    .replace(/&/g, "&")
    .replace(/g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """);
  var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
  var htmlData = finalText.replace(
    urlPattern,
    '$&'
  );
  return htmlData;
}

// inner HTML Example...
function createMarkup() {
  let getValue = textToLink(
    "display text with link :- https://www.skptricks.com/2018/12/javascript-timers-with-examples.html"
  );
  return {
    __html: getValue
  };
}

//React component...
function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);

Output :
----------------------
Check out this link :  https://codesandbox.io/s/42q8krj1ow

This is all about react dangerouslySetInnerHTML attribute. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Làm cách nào để thay thế InternalHTML trong DOM của trình duyệt?

Làm cách nào để sử dụng InternalHTML trong React?

Phương pháp nào được sử dụng để thao tác DOM trong React?

Việc sử dụng InternalHTML trong JavaScript là gì?