Inserir HTML com React Variable Statements (JSX)

Estou criando algo com React, onde preciso inserir HTML com React Variables em JSX. Existe uma maneira de ter uma variável assim:

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

e inseri-lo em reagir assim, e funcionou?

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

e ele insere o HTML conforme o esperado? Não vi nem ouvi nada sobre uma função de reação que pudesse fazer isso em linha ou sobre um método de analisar coisas que permitiriam que isso funcionasse.

Você pode usar perigosamente o SetInnerHTML , por exemplo,

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

Observe que isso dangerouslySetInnerHTMLpode ser perigoso se você não souber o que está na cadeia HTML que está injetando. Isso ocorre porque o código malicioso do lado do cliente pode ser injetado por meio de tags de script.

Provavelmente, é uma boa ideia higienizar a string HTML por meio de um utilitário como DOMPurify, se você não tiver 100% de certeza de que o HTML que você está processando é seguro para XSS (cross-site scripting).

Exemplo:

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>
    );
}

dangerouslySetInnerHTML tem muitas desvantagens, pois é definido dentro da tag.

Eu sugiro que você use algum wrapper de reação como o que encontrei aqui no npm para esse fim. html-react-parser faz o mesmo trabalho.

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>
    );
}

Muito simples :)

Usando ''você está fazendo isso para string. Use sem vírgulas invertidas, funcionará bem.

Para evitar erros de linter, eu o uso assim:

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

Ao usar '', o valor é definido como uma sequência e o React não tem como saber que é um elemento HTML. Você pode fazer o seguinte para que o React saiba que é um elemento HTML -

1. Remova o ''e funcionaria
2. Use <Fragment>para retornar um elemento HTML.

Se mais alguém ainda pousar aqui. Com o ES6, você pode criar sua variável html da seguinte forma:

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

Você também pode incluir esse HTML no ReactDOM assim:

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

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

Aqui estão dois links link e link2 da documentação do React que podem ser úteis.