Reactjsはhtml文字列をjsxに変換します

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

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

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

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

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

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

Reactはこの意図的に煩雑な構文を強制するため、誤ってテキストをHTMLとしてレンダリングしたり、XSSバグを導入したりすることはありません。

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

その他の方法

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

   <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. 最後の手段 -を使用して生のHTMLを挿入しますdangerouslySetInnerHTML。

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

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


//to install package using npm, execute the command
npm install interweave

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

私はこの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リンク

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

react-html-parserと呼ばれるnpmパッケージの使用を開始します

まだ実験中の人のために、npm install react-html-parser

インストールしたところ、毎週123628のダウンロードがありました。

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

Reactで生のhtmlをレンダリングしたい場合は、以下を使用できます

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

例-レンダリング

テストは良い日です