Jadikan string HTML sebagai HTML asli dalam komponen Bereaksi

Inilah yang saya coba dan bagaimana kesalahannya.

Ini bekerja:

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

Ini tidak:

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

Properti deskripsi hanyalah string normal konten HTML. Namun itu diterjemahkan sebagai string, bukan sebagai HTML karena alasan tertentu.

Ada saran?

Periksa apakah teks yang Anda coba tambahkan ke node tidak lolos seperti ini:

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

Alih-alih ini:

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

jika lolos Anda harus mengubahnya dari sisi server Anda.

Node adalah teks karena lolos

Node adalah dom dom karena tidak lolos

Apakah this.props.match.descriptionApakah string atau suatu objek? Jika ini sebuah string, itu harus dikonversi ke HTML dengan baik. Contoh:

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

Hasil: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Namun jika description: <h1 style="color:red;">something</h1>tanpa tanda kutip ''Anda akan mendapatkan:

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

Jika ini sebuah string dan Anda tidak melihat markup HTML, satu-satunya masalah yang saya lihat adalah markup yang salah ..

MEMPERBARUI

Jika Anda berurusan dengan HTMLEntitles. Anda harus memecahkan kode sebelum mengirimnyadangerouslySetInnerHTML itu sebabnya mereka menyebutnya berbahaya :)

Contoh kerja:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

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

Saya menggunakan 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Sumber di npmjs.com

Mengangkat komentar @ okram untuk lebih banyak visibilitas:

dari uraian github-nya: Mengubah string HTML secara langsung menjadi komponen Bereaksi, menghindari kebutuhan untuk menggunakan berbahayaSetInnerHTML dari npmjs.com Utilitas untuk mengubah string HTML menjadi komponen Bereaksi. Menghindari penggunaan berbahayaSetInnerHTML dan mengubah elemen HTML standar, atribut dan gaya inline menjadi Bereaksi setara mereka.

Jika Anda memiliki kendali atas dari mana string yang berisi html berasal (mis. Di suatu tempat di aplikasi Anda), Anda dapat mengambil manfaat dari <Fragment>API baru , melakukan sesuatu seperti:

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

Anda hanya menggunakan metode React berbahaya

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Atau Anda dapat menerapkan lebih banyak dengan cara mudah ini: Merender HTML mentah di aplikasi Bereaksi

berbahayaInetHTML

hazardouslySetInnerHTML adalah pengganti React untuk menggunakan innerHTML di browser DOM. Secara umum, pengaturan HTML dari kode berisiko karena mudah untuk secara tidak sengaja mengekspos pengguna Anda terhadap serangan lintas situs (XSS). Jadi, Anda dapat mengatur HTML langsung dari Bereaksi, tetapi Anda harus mengetikkan berbahayaSetInnerHTML dan meneruskan objek dengan kunci __html, untuk mengingatkan diri sendiri bahwa itu berbahaya. Sebagai contoh:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Saya menggunakan innerHTML bersama-sama ref untuk span:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Dalam kasus saya, saya menggunakan react-render-html

Pertama instal paket dengan npm i --save react-render-html

kemudian,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Saya tidak bisa mendapatkannya npm build bekerja react-html-parser. Namun, dalam kasus saya, saya berhasil menggunakan https://reactjs.org/docs/fragments.html . Saya memiliki persyaratan untuk menunjukkan beberapa karakter html unicode, tetapi mereka tidak boleh langsung disematkan di JSX. Di dalam BEJ, itu harus dipilih dari status Komponen. Cuplikan kode komponen diberikan di bawah ini:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

saya menggunakan https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Jika Anda memiliki kontrol ke {this.props.match.description} dan jika Anda menggunakan JSX. Saya akan merekomendasikan untuk tidak menggunakan "hazardouslySetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);