React Variableステートメントを使用してHTMLを挿入する（JSX）

JSXでReact変数を使用してHTMLを挿入する必要があるReactで何かを構築しています。そのような変数を持つ方法はありますか：

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

そしてそれをreactに挿入してそのように動作させますか？

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

期待どおりにHTMLを挿入していますか？これをインラインで実行することができる反応関数、またはこれを機能させることを可能にするものを解析する方法について、私は何も見たり聞いたりしたことがありません。

例えば、dangerouslySetInnerHTMLを使用できます。

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

dangerouslySetInnerHTML注入するHTML文字列の内容がわからない場合、危険になる可能性があることに注意してください。これは、悪意のあるクライアント側コードがスクリプトタグを介して挿入される可能性があるためです。

レンダリングするHTMLがXSS（クロスサイトスクリプティング）セーフであることが100％確実でない場合は、DOMPurifyなどのユーティリティを使用してHTML文字列をサニタイズすることをお勧めします。

例：

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はタグ内に設定されるため、多くの欠点があります。

この目的のために、ここでnpmにあるようなラッパーを使用することをお勧めします。 html-react-parserも同じ働きをします。

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

非常にシンプル:)

使用''することで紐になっています。逆コンマなしで使用すると問題なく動作します。

リンターエラーを回避するために、次のように使用します。

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

''を使用すると、値が文字列に設定され、ReactはそれがHTML要素であることを知る方法がありません。次のようにして、HTML要素であることをReactに知らせることができます-

1. を削除します ''、それは動作します
2. <Fragment>HTML要素を返すために使用します。

他の誰かがまだここに上陸した場合。ES6では、次のようにHTML変数を作成できます。

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

このHTMLを次のようにReactDOMに含めることもできます。

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

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

以下は、役立つかもしれないReactのドキュメントからの2つのリンクlinkとlink2です。