Wstaw HTML z instrukcjami zmiennej Reactowej (JSX)

Buduję coś z Reactem, gdzie muszę wstawić HTML ze zmiennymi Reactowymi w JSX. Czy istnieje sposób na taką zmienną: 

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

I wstawić go do Reacta w ten sposób, i mieć to działa?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

I czy wstawia HTML zgodnie z oczekiwaniami? Nie widziałem ani nie słyszałem nic o funkcji reactowej, która mogłaby to zrobić w wierszu, ani o metodzie parsowania rzeczy, która umożliwiłaby to działanie.

Author: Sophie Alpert, 2014-05-12
Source

7 answers

Możesz użyć dangerouslySetInnerHTML , np. 

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}
 191
Author: Douglas,
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
2017-05-23 10:31:37

Zauważ, że dangerouslySetInnerHTML może być niebezpieczne, jeśli nie wiesz, co znajduje się w ciągu HTML, który wstrzykiwasz. dzieje się tak dlatego, że złośliwy kod po stronie klienta może być wstrzykiwany za pomocą znaczników skryptu.

Prawdopodobnie dobrym pomysłem jest wyczyszczenie ciągu HTML za pomocą narzędzia takiego jak DOMPurify Jeśli nie jesteś w 100% pewien, że renderowany HTML jest bezpieczny dla XSS (cross-Site scripting).

Przykład: 

import DOMPurify from 'dompurify'

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}
 50
Author: Yo Wakita,
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
2017-02-22 01:17:55

DangerouslySetInnerHTML ma wiele wad, ponieważ ustawia się wewnątrz tagu.

Proponuję użyć do tego celu jakiegoś reactowego wrappera, takiego jaki znalazłem tutaj na npm. html-react-parser wykonuje to samo zadanie.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Bardzo Proste:)

 22
Author: user2903536,
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
2017-08-17 05:28:43

Aby uniknąć błędów lintera, używam go w ten sposób: 

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }
 1
Author: Tudor Morar,
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
2018-05-22 12:19:08

Używając '' tworzysz string. Użyj bez odwróconych przecinków, będzie działać dobrze.

 0
Author: chauhan amit,
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
2018-03-16 16:03:27

Jeśli ktoś jeszcze tu wyląduje. Za pomocą ES6 możesz utworzyć zmienną html w następujący sposób: 

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}
 -2
Author: Harry,
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
2017-10-27 13:30:15

Możesz również umieścić ten HTML w ReactDOM w następujący sposób: 

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Oto dwa linki link i link2 z Dokumentacji Reacta, które mogą być pomocne.

 -3
Author: GrassLand,
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
2018-03-16 10:30:57