web-dev-qa-db-ja.com

ReactコンソールでHTML文字列を実際のHTMLとしてレンダリングする

これが私が試したことと、それがどうやってうまくいかないかです。

これは動作します：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

そうではありません。

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

Descriptionプロパティは、通常のHTMLコンテンツの文字列です。しかし、それは文字列としてレンダリングされ、何らかの理由でHTMLとしてはレンダリングされません。

enter image description here

助言がありますか？

javascripthtmlreactjsjsx
80
Sergio Tapia

ノードに追加しようとしているテキストがこのようにエスケープされていないかどうかを確認します。

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

これの代わりに：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

エスケープされている場合は、サーバーサイドから変換する必要があります。

The node is text because is escaped

エスケープされているため、ノードはテキストです。

The node is a dom node because isn't escaped

エスケープされていないため、ノードはDOMノードです。

26
Sergio Flores

this.props.match.descriptionは文字列ですか、それともオブジェクトですか？もしそれが文字列であれば、それはHTMLにうまく変換されるべきです。例：

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

結果： http://codepen.io/ilanus/pen/QKgoLA?editors=1011

ただし、description: <h1 style="color:red;">something</h1>を引用符なしで''とすると、次のようになります。

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

もしそれが文字列で、HTMLマークアップを見ていないのなら、私が目にする唯一の問題は間違ったマークアップです。

UPDATE

あなたがHTMLEntitlesを扱っているならば。あなたはそれらをdangerouslySetInnerHTMLに送る前にデコードする必要があります。

作業例：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
53
Ilanus

Htmlを含む文字列がどこから来ているのか（例えば、あなたのアプリのどこかで）制御できれば、新しい<Fragment> APIの恩恵を受けることができます。

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}
11
Brad Adams

私は「react-html-parser」を使用しました

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Npmjs.comのソース

4
pixelearth