273

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

ReactJS レンダリング文字列

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

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

ここに画像の説明を入力

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

4

13 に答える 13

488

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

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

React は、テキストを誤って HTML としてレンダリングして XSS バグを導入しないように、この意図的に面倒な構文を強制します。

于 2013-10-09T16:34:22.507 に答える
89

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

その他の方法

  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'}} />

于 2015-01-14T08:10:10.143 に答える
0

これは非常に簡単です。
そして、それは完全に機能します。

import {settings} from '../settings';


const NavBar = (props) => {
    
    let isLoggedIn=props.isLoggedIn;

    let login_partial = "";
    if(isLoggedIn)
    {login_partial= <li>Log Out</li>;}
    else{
    login_partial=
  <div>
      <li>Login</li>
    <li>Sign Up</li>
</div>;
   }

    return(
        <div>
               <ul>
                    <li>Home</li>
                    <li>Products</li>
                    {login_partial}
                </ul>
        </div>
    )
}
export default NavBar;
于 2021-09-22T06:38:17.180 に答える
0

レンダリングする文字列に含まれるタグが事前にわかっている場合。これは、たとえば、文字列の作成時に特定のタグのみが許可されている場合などです。これに対処する可能な方法は、Trans ユーティリティを使用することです。

import { Trans } from 'react-i18next'
import React, { FunctionComponent } from "react";

export type MyComponentProps = {
    htmlString: string
}

export const MyComponent: FunctionComponent<MyComponentProps> = ({
  htmlString
}) => {
  return (
    <div>
      <Trans
        components={{
          b: <b />,
          p: <p />
        }}
      >
        {htmlString}
      </Trans>
    </div>
  )
}

その後、あなたはいつものようにそれを使用することができます

<MyComponent
    htmlString={'<p>Hello <b>World</b></p>'}
/>
于 2021-02-25T18:06:04.180 に答える