Reaguj.js: Set innerHTML vs dangerouslySetInnerHTML

Question

Reaguj.js: Set innerHTML vs dangerouslySetInnerHTML

Czy istnieje jakaś różnica "za kulisami" od ustawienia elementu innerHTML zamiast ustawienia właściwości dangerouslySetInnerHTML na elemencie? Załóżmy, że właściwie odkażam rzeczy dla uproszczenia.

Przykład:

var test = React.createClass({
  render: function(){
    return (
      <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
    );
  }
});

Vs

var test = React.createClass({
  componentDidUpdate: function(prevProp, prevState){
    this.refs.test.innerHTML = "Hello";
  },
  render: function(){
    return (
      <div contentEditable='true' ref='test'></div>
    );
  }
});

Robię coś nieco bardziej skomplikowanego niż powyższy przykład, ale ogólny pomysł jest taki sam

203

javascript html reactjs innerhtml

Author: Malady, 2016-05-20

Source

4 answers

Zgodnie z niebezpiecznie ustawić innerHTML ,

Niewłaściwe użycie innerHTML może otworzyć Cię do cross-site scripting (XSS) do ataku. Dezynfekcja wejścia użytkownika na wyświetlacz jest notorycznie podatna na błędy, a brak prawidłowego dezynfekcji jest jedną z głównych przyczyn sieci luki w Internecie.

Naszą filozofią projektowania jest to, że powinno być" łatwo", aby rzeczy były bezpieczne, i deweloperzy powinni wyraźnie podać swój zamiar podczas wykonywania "niebezpieczne" operacje. Nazwa prop dangerouslySetInnerHTML to celowo wybrany jako przerażający, a wartość prop (obiekt zamiast ciągu znaków) mogą być użyte do wskazania danych sanitized.

Po pełnym zrozumieniu konsekwencji bezpieczeństwa i odpowiednim dezynfekcji danych, utwórz nowy obiekt zawierający tylko klucz __html i Twoje dane jako wartość. Oto przykład użycie składni JSX:

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

<div dangerouslySetInnerHTML={createMarkup()} />

Przeczytaj więcej na ten temat poniżej link:

Dokumentacja: React Dom Elements-dangerouslySetInnerHTML .

7

Author: Ganesh Sanap,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-03-16 18:03:32

Możesz bezpośrednio powiązać dom

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

5

Author: Lekens,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-19 23:43:13

Na podstawie ( dangerouslySetInnerHTML).

To rekwizyt, który robi dokładnie to, co chcesz. Jednak nazywają go, aby przekazać, że należy go używać z ostrożnością

2

Author: Jason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-16 15:51:19

score 272 · Accepted Answer

Tak, jest różnica!

Natychmiastowy efekt użycia innerHTML versus dangerouslySetInnerHTML jest identyczny - węzeł DOM zaktualizuje się o wstrzykiwany HTML.

jednakże, za kulisami, kiedy używasz dangerouslySetInnerHTML, pozwala Reactowi wiedzieć, że HTML wewnątrz tego komponentu nie jest czymś, na czym mu zależy.

Ponieważ React używa Wirtualnego DOM, kiedy porównuje diff z rzeczywistym DOM, może prosto omijać sprawdzanie Potomków tego węzła ponieważ wie, że HTML pochodzi z innego źródła . Więc jest wzrost wydajności.

Co ważniejsze , jeśli po prostu użyjesz innerHTML, React nie będzie wiedział, że węzeł DOM został zmodyfikowany. Następnym razem, gdy zostanie wywołana funkcja render, React nadpisze zawartość, która została ręcznie wstrzyknięta z tym, jaki powinien być prawidłowy stan tego węzła DOM.

Twoje rozwiązanie do użycia componentDidUpdate aby zawsze upewnić się, że zawartość jest zsynchronizowana wierzę, że zadziała, ale tam może to być błysk podczas każdego renderowania.