Wstaw HTML za pomocą instrukcji React Variable (JSX)

Tworzę coś z React, gdzie muszę wstawić HTML z React Variables w JSX. Czy istnieje sposób na taką zmienną:

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

i wstawić go w taki sposób, żeby 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 na temat funkcji reagowania, która mogłaby to zrobić bezpośrednio, lub metody analizowania rzeczy, które pozwoliłyby na to.

Możesz użyć niebezpiecznieSetInnerHTML , np

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

Pamiętaj, że dangerouslySetInnerHTMLmoże być niebezpieczne, jeśli nie wiesz, co zawiera wstrzykiwany ciąg HTML. Wynika to z tego, że złośliwy kod po stronie klienta można wstrzykiwać za pomocą znaczników skryptu.

Prawdopodobnie dobrym pomysłem jest odkażenie łańcucha HTML za pomocą narzędzia takiego jak DOMPurify, jeśli nie masz 100% pewności, że renderowany HTML jest bezpieczny dla XSS (cross-site scripting).

Przykład:

import DOMPurify from 'dompurify'

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


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

niebezpiecznieSetInnerHTML ma wiele wad, ponieważ znajduje się wewnątrz znacznika.

Sugeruję, abyś użył do tego jakiegoś reagującego opakowania, jak znalazłem tutaj na npm. parser HTML-Reaktywuj wykonuje tę samą pracę.

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 prosty :)

Za pomocą ''robisz to na sznurku. Użyj bez odwróconych przecinków, będzie działać dobrze.

Aby uniknąć błędów linijek, używam go w następujący sposób:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

import { Fragment } from 'react' // react version > 16.0

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

Używając „” ustawia wartość na ciąg znaków, a React nie ma możliwości dowiedzenia się, że jest to element HTML. Możesz wykonać następujące czynności, aby poinformować React, że jest to element HTML -

1. Usuń ''i to by działało
2. Użyj, <Fragment>aby zwrócić element HTML.

Jeśli ktoś jeszcze tu wyląduje. Za pomocą ES6 możesz utworzyć swoją zmienną HTML tak:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

Możesz także dołączyć ten kod HTML do 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 React, które mogą być pomocne.