rendering html nella stringa di stato

Question

Uso setState per aggiornare parte dell'html ma ho trovato che il nuovo aggiornamento html non è stato reso. Ecco il codice, js fiddle:

html:

<div>hello<br />world<br /></div> 
<div id='content'></div> 

js:

var Main = React.createClass({ 
    getInitialState: function() { 
     return {output: 'hello<br />world<br />'}; 
     }, 
    render: function() { 
     return (
      <div>   
       {this.state.output} 
      </div> 
     ); 
     } 
}); 

React.renderComponent(<Main/>, document.getElementById('content')); 

Tralascio la parte che Aggiorna HTML dal server, ma il risultato è lo stesso. Come lasciare che la stringa in stato sia resa?

Answer 1

Usa dangerouslySetInnerHTML per iniettare HTML come una stringa in React (ma nota che reagiscono non sarà in grado di utilizzare questo markup nella sua DOM virtuale):

<div dangerouslySetInnerHTML={{__html: this.state.output}} /> 

http://jsfiddle.net/5Y8r4/11/

L'API per fare questo è volutamente complesso perché non è sicuro farlo di routine. React ha protezioni contro XSS, usando dangerouslySetInnerHTML aggira quelle e ti apre rischi se non stai disinfettando quei dati.