Renderuj ciąg HTML jako prawdziwy HTML w komponencie React

Question

Oto, co próbowałem i jak idzie nie tak.

to działa:

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

To nie:

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

---

Opis nieruchomość jest po prostu normalny ciąg zawartości HTML. Jednak z jakiegoś powodu jest renderowany jako ciąg znaków, a nie jako HTML.

Wszelkie sugestie?

Answer 1

Sprawdź, czy tekst, który próbujesz dołączyć do węzła ma uciekł tak :

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

Zamiast tego:

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

jeśli I s escaped powinieneś przekonwertować go ze swojej strony serwera.

Węzeł jest tekst, bo jest uciekł

węzeł jest węzłem dom, ponieważ nie jest uciekł

Answer 2

Czy this.props.match.description Czy ciąg znaków lub obiekt? Jeśli jest to ciąg znaków, powinien zostać przekonwertowany do formatu HTML. Przykład:

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

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

Jednak jeśli description: <h1 style="color:red;">something</h1> bez cudzysłowów '' masz zamiar dostać:

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

jeśli jest to ciąg i nie widać żadnych znaczników HTML jedyny problem, jaki widzę, to niewłaściwy znacznik.

UPDATE

Jeśli masz do czynienia z HTMLEntitles. Trzeba ich dekodowania przed ich wysłaniem do dangerouslySetInnerHTML dlatego nazwali go niebezpiecznie :)

przykład robocza:

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