web-dev-qa-db-ja.com

反応変数ステートメントを含むHTMLの挿入（JSX）

JSXにReact変数を含むHTMLを挿入する必要がある場合に、Reactで何かを構築しています。そのような変数を持つ方法はありますか？

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

そしてそのように反応させるためにそれを挿入し、それが機能するか？

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

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

javascripthtmlfrontendreactjsreact-jsx
163
Kyle Hotchkiss

dangerouslySetInnerHTML を使うことができます。

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

あなたが注入しようとしているHTML文字列の中に何があるのか​​わからなければdangerouslySetInnerHTMLは危険になる可能性があることに注意してください。スクリプトタグ.

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

例：

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>
    );
}
79
Yo Wakita

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

とてもシンプルです。

35
user2903536

''を使うことであなたはそれを文字列にしています。逆カンマなしで使用すると、正常に機能します。

7
chauhan amit

リンターエラーを避けるために、私はこれを次のように使用します。

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }
2
Tudor Morar
import { Fragment } from 'react' // react version > 16.0

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

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

  1. ''を削除すればうまくいくでしょう
  2. HTML要素を返すには<Fragment>を使用してください。
2
Amandeep Singh Ghai