web-dev-qa-db-ja.com

HTMLに変換するReactjs

私はFacebookのReactJSを扱うのに問題があります。私がajaxをしてHTMLデータを表示したいときはいつでも、ReactJSはそれをテキストとして表示します。 （下図参照）

ReactJS render string

データはjquery Ajaxの成功コールバック関数を介して表示されます。

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

enter image description here

これをHTMLに変換する簡単な方法はありますか？ ReactJSを使ってどのようにすればいいですか？

javascriptjqueryajaxreactjsreact-jsx
165
Peter Wateber

デフォルトでは、ReactはHTMLをエスケープして XSS（クロスサイトスクリプティング） を防ぎます。本当にHTMLをレンダリングしたい場合は、 dangerouslySetInnerHTML プロパティを使用できます。

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

Reactは意図的に面倒な構文を強いるので、誤ってテキストをHTMLとしてレンダリングしてXSSバグを引き起こすことはありません。

334
Sophie Alpert

これを達成するためのより安全な方法があります。これらのメソッドで ドキュメントは更新されました 。

その他の方法

  1. 最も簡単 - Unicodeを使用し、ファイルをUTF-8として保存し、charsetをUTF-8に設定します。

    <div>{'First · Second'}</div>

  2. より安全 - Javascript文字列内のエンティティにUnicode番号を使用します。

    <div>{'First \u00b7 Second'}</div>

    または

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. あるいは文字列とJSX要素が混在する配列。

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. ラストリゾート - dangerouslySetInnerHTMLを使用して生のHTMLを挿入します。

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

63
Brett DeWoody

milesj によって作成された Interweave を使用することをお勧めします。 HTMLを解析して安全にDOMに挿入するための独創的な手法であれば、その数を活用する驚異的なライブラリです。

Interweaveは、安全にHTMLをレンダリングし、属性をフィルタし、テキストをマッチャーで自動折り返し、絵文字をレンダリングするなどの反応ライブラリです。

  • Interweaveは次のことができる堅牢なReactライブラリです。
    • DangerouslySetInnerHTMLを使用せずにHTMLを安全にレンダリングします。
    • HTMLタグを安全に削除します。
    • 自動XSSおよび注入保護.
    • フィルタを使用してHTML属性を消去します。
    • マッチャーを使用してコンポーネントを内挿します。
    • URL、IP、電子メール、およびハッシュタグを自動リンクします。
    • 絵文字と絵文字をレンダリングします。
    • そしてもっとたくさん！

使用例：

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave
11
Arman Nisch

私はこのjsのいじるを見つけました。これはこんな感じ

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

jsfiddle link

4
Hassan Gilak

Html-react-parserからParser（）を使用することもできます。私は同じを使っています。 リンク 共有。

1
Abhra Dey

私はreact-html-parserと呼ばれるnpmパッケージを使い始める

0
Dayan