2015-06-08 27 views
9

Avrei ottenuto il contenuto html dinamico dal rendering del mio modello reso da altri componenti di reazione. Come convertirei questa stringa html in componente React in modo che possa utilizzare il componente nella mia funzione di rendering. Si noti che voglio preservare gli attributi specifici di reazione usati per la diffusione.stringa HTML dinamica per reagire al componente

React.createClass({ 
 
    var self = this; 
 

 
    componentWillMountDown : function() { 
 
    //htmlString is essentially huge dynamic one in my actual case 
 
    var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>"; 
 
    self.setState({responseString : htmlString}); 
 
    self.forceUpdate(); 
 
    }, 
 
    
 
    render: function() { 
 
    var Response = this.state.responseString; 
 
    //how would I return the react component as response? 
 
    return (<Response/>); //does not work. err is it shd be valid react component 
 
    } 
 
});

Ho provato a convertire htmlString all'oggetto HTMLDocument e ricorsivamente creando React.createElement in callback willmount e impostazione reagiscono componente. tuttavia, l'errore è di tipo toUpperCase non è definito.

risposta

6

Perché si memorizza il componente come stringa, quindi è necessario utilizzare dangerouslySetInnerHTML. Questo è il mio suggerimento Spero che qualcun altro abbia la risposta migliore. :)

render: function() { 
    var self = this; 
    var Response = React.createClass({ 
     render: function(){ 
     return (<div dangerouslySetInnerHTML={{__html: self.state.responseString}}></div>) 
     } 
    }); 
    return (
      <Response /> 
    ) 
    } 
+3

Ho appena modificato la domanda. Dal momento che voglio preservare reagire attributi specifici non sarò in grado di utilizzare pericolosamente SetInnerHtml. Esiste un modo programmatico per creare componenti di reazione dalla stringa HTML – BharaniK

6

Poche ore fa, ho pubblicato un modulo html-to-react a NPM (https://www.npmjs.com/package/html-to-react) che possono aiutare.

Per favore fatemi sapere se c'è qualcosa che vi serve, posso certamente lavorare con voi per rendere il modulo più flessibile.

+0

Come posso utilizzare htm-to-react in un progetto MVC Asp.Net? Ho cercato su internet ma non riesco a trovare una risposta semplice. –

+0

Probabilmente dovrai configurare ReactJS.net per usare il webpack, che è un vero dolore. Vedi: https://reactjs.net/guides/webpack.html - Dopo aver provato questo approccio e aver avuto successo (dopo alcuni giorni di lavoro) ho avuto il progetto ASP.Net MVC modificato per utilizzare un'API RESTful e portato il front-end per creare-reagire-app –

Problemi correlati