search

Hướng dẫn dangerouslysetinnerhtml

Ngày đăng: 27/09/2022
Trả lời: 0
Lượt xem: 182

I'm currently having a React Component like this:

Show
        

            
            
Thông tin sản phẩm

It seems that dangerouslySetInnerHTML doesn't impact to Component Lifecycle. I put this line in componentDidMount, but it return wrong result:

let b = $("#product-content").height(); // wrong: 600, true: 6500

If I try to run above line in console dev tool, it returns true result because component has been rendered completely.

How can I trigger callback for dangerouslySetInnerHTML?

asked Jun 14, 2017 at 16:47

Hướng dẫn dangerouslysetinnerhtml

Viet PhanViet Phan

1,7383 gold badges21 silver badges40 bronze badges

2

It looks like the DOMSubtreeModified event has been deprecated in favor of the Mutation Observer API.

You could refactor the code proposed by lustoykov to use the new API:

class ContentRenderer extends React.Component {
  componentDidMount() {
      this.observer = new MutationObserver(this.handleMutation);
      this.observer.observe(this.myElement, {
        // Check config in https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
        childList: true,
        attributes: true,
        characterData: true
      });
    }
  
    componentWillUnmount() { 
      this.observer.disconnect();
    }
    
    handleMutation() {
      console.log('mutation');
    }
    
    render() {
      return (
        
Test
" }}
          ref={(myElement) => { this.myElement = myElement; }}
        />
      );
    }
  }

answered Mar 23, 2018 at 17:44

0

There isn't a callback for completion of dangerouslySetInnerHTML yet, you'll have to resort to refs and DOMSubtreeModified.

 // use ref to get the DOM Node
 
 this.myElement = myElement}
  >
 


 // Listen for changes inside the DOM Node
 componentDidMount() { 
    this.myElement.addEventListener('DOMSubtreeModified', () => {
      // execute your logic here...
    });
 }

 // Don't forget to clean up the listener
 componentWillUnmount() { 
    this.myElement.removeEventListener('DOMSubtreeModified');
 }

PS.

Be very careful with this event (DOMSubtreeModified) it is easy to cause an infinite loop if you decide to change the DOM inside the event handler.

answered Jun 14, 2017 at 18:59

LyubomirLyubomir

19.2k5 gold badges53 silver badges67 bronze badges

1

React áp dụng hệ thống DOM không phụ thuộc vào trình duyệt để tăng hiệu suất và độ tương thích với nhiều trình duyệt khác nhau. Nhân dịp này, chúng tôi đã loại bỏ một số khía cạnh chưa hoàn chỉnh trong cách triển khai DOM trên trình duyệt.

Trong React, tất cả các thuộc tính của DOM (bao gồm xử lí sự kiện) phải được viết theo camelCase. Ví dụ như attribute tabindex, thì trong React là tabIndex. Có những ngoại lệ là thuộc tính aria-* và data-* phải được viết chữ thường. Ví dụ aria-label vẫn là aria-label.

Sự khác biệt trong các thuộc tính

Có một vài thuộc tính hoạt động khác biệt giữa React và HTML:

checked

Thuộc tính checked được hỗ trợ bởi các component với kiểu checkbox hoặc radio. Bạn có thể dùng nó để thiết lập cho component có được checked hay chưa. Điều này hữu ích khi xây dựng những Component Kiểm Soát. defaultChecked là giá trị không kiểm soát, nó sẽ quyết định component có được chọn hay không khi nó được mount lần đầu tiên.

className

Để đặt class css, sử dụng thuộc tính className. Nó được sử dụng cho tất cả các phần tử DOM và SVG như div, a và những thuộc tính khác.

Nếu bạn sử dụng React với Web Components (trường hợp không phổ biến), thì vẫn dùng class.

dangerouslySetInnerHTML

dangerouslySetInnerHTML tương đương với innerHTML trong DOM. Nhìn chung, việc thay đổi DOM từ Javascript khá rủi ro do nó có thể vô tình để lộ người dùng cross-site scripting (XSS). Vì vậy, React có thể tạo HTML trực tiếp, nhưng bạn phải sử dụng dangerouslySetInnerHTML và truyền một object với key là _html để nhăc bạn nhớ rằng điều này không an toàn. Ví dụ:

function createMarkup() {
  return {__html: 'First · Second'};
}

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

htmlFor

Do for là một từ khoá trong Javascript, React dùng htmlFor.

onChange

Sự kiện onChange hoạt động đúng như tên gọi của nó: khi một giá trị của trường mẫu bị thay đổi, sự kiện này được phát ra. Chúng tôi cố tình không sử dụng hành vi của trình duyệt bởi vì onChange được hiểu sai bởi chính hành vi của nó và React dựa vào sự kiện này để xử lý đầu vào của người dùng trong thời gian thực.

selected

Thuộc tính selected được sử dụng trong để đánh dấu option nào được chọn trong một . Tham khảo tại chi tiết tại “Thẻ select [The select Tag]”.

style

Lưu ý

Một vài ví dụ trong tài liệu này sử dụng style cho tiện, thực tế sử dụng thuộc tính style trực tiếp không được khuyến khích . Trong đa số các trường hợp, className nên được dùng cùng với một file CSS rời để style. Thuộc tính style thường được dùng trong React để trỏ tới những class được định nghiã ở stylesheet css bên ngoài. Xem thêm FAQ: Styling and CSS.

Thuộc tính style nhận vào một object với các thuộc tính CSS ở dạng camelCase thay vì một chuỗi CSS. Nó sẽ nhất quán với thuộc tính style của Javascript trên DOM, hiệu quả hơn và đề phòng những lỗ hỗng bảo mật XSS. Ví dụ:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!div>;
}

Nhớ rằng styles không tự động thêm tiền tố. Để tương thích với các trình duyệt nên bạn phải tự thêm tiền tố vào. Ví dụ:

const divStyle = {
  WebkitTransition: 'all', // nhớ là chữ 'W' được viết hoa
  msTransition: 'all' // 'ms' là tiền tố duy nhất được viết thường
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browserdiv>;
}

Các từ khoá style được viết theo dạng camelCase để đồng nhất với việc truy cập các thuộc tính trên DOM từ Javascript, ví dụ node.style.backgroundImage. Các tiền tố ngoài ms phải được bắt đầu bằng một chữ hoa ví dụ như WebkitTransition.

React sẽ tự động thêm hậu tố “px” vào sau một vài kiểu thuộc tính số inline nhất định. Nếu bạn muốn sử dụng đơn vị khác ngoài ‘px’, hãy thêm đơn vị mong muốn dưới dạng chuỗi, ví dụ:

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
div>

Không phải thuộc tính nào cũng được thêm hậu tố “px” vào sau. Các thuộc tính không có đơn vị sẽ được giữ nguyên, ví dụ như zoom, order, flex. Danh sách tất cả các thuộc tính không có đơn vị có thể được tìm thấy ở đây.

suppressContentEditableWarning

Một component có component con được đánh dấu là contentEditable sẽ không hoạt động và sẽ được cảnh báo. Thuộc tính này sẽ bỏ đi cảnh báo, nhưng các bạn không cần thiết phải dùng nó trừ khi bạn đang xây dựng một thư viện làm việc trực tiếp với contentEditable như Draft.js.

suppressHydrationWarning

Nếu bạn sử dụng server-side rendering, thông thường sẽ có một cảnh báo khi nội dung được render trên server khác với client. Tuy nhiên, trong một vài trường hợp, rất khó để đảm báo server và client trùng khớp với nhau ví dụ như render timestamp.

Nếu bạn để suppressHydrationWarning là true, React sẽ không cảnh báo về những sự không trùng khớp trong những thuộc tính và nội dung của element đó. Nó chỉ hoạt động một cấp, và được dự định sử dụng như một lối thoát. Đừng lạm dụng nó. Bạn có thể xem thêm về hydration tại ReactDOM.hydrate().

value

Thuộc tính value được hỗ trợ bởi những component , select và