2016-04-07 1 views
6

Voglio rendere i componenti di reazione con una stringa come input che sto ricevendo dinamicamente da un'altra pagina. BUt avrò i riferimenti per i componenti di reazione. Ecco l'esempioRendering di una stringa come componente React

Page1: 
----------------------------- 
loadPage('<div><Header value=signin></Header></div>'); 

Page2: 
-------------------------------- 
var React =require('react'); 
var Header = require('./header'); 

var home = React.createClass({ 

loadPage:function(str){ 

      this.setState({ 
      content : str 
      }); 

    }, 

render : function(){ 

    return {this.state.content} 
} 

}); 

In questo esempio sto ricevendo componente di intestazione come stringa, e ho il riferimento del componente di intestazione nella mia pagina di ricezione. Come posso sostituire la stringa con il componente reattivo effettivo

+0

Qual è il tuo caso d'uso esattamente? Il modello che fornisci è molto raro e non penso che tu possa convertire la tua stringa in componenti. Perché non usi qualche id stringa come arg nella tua funzione loadPage(), quindi esegui il rendering (reale) dei componenti di conseguenza nel tuo metodo di rendering? –

+0

L'editor di pagine, qualunque sia stato salvato il markup nel file, deve essere nuovamente riportato nell'editor di pagine – jazean

+1

Quindi è meglio memorizzare una struttura JSON che rispecchi l'albero dei componenti rispetto alla marcatura. Se si guarda come appare la dichiarazione dei componenti React senza jsx, vedrete come serializzarlo. Ad esempio '' è sotto il cofano: 'React.createElement (Intestazione, {chiave: valore}, React.createElement (OtherComponent, null))' – VonD

risposta

3

Per eseguire il rendering di un componente che reagisce utilizzando una stringa che è possibile utilizzare.

var MyComponent = Components[type + "Component"]; 
return <MyComponent />; 

Per ulteriori informazioni consulta la risposta qui: React/JSX Dynamic Component Name

0

Se si può vivere con avere tutti i componenti in un unico modulo, allora questo funziona abbastanza bene:

import * as widgets from 'widgets'; 
    var Type = widgets[this.props.componentId]; 
    ... 
    <Type /> 

L'importazione jolly funziona come un registro dei componenti ridotto.

3

Questo react-jsx-parser componente sembra che sarà risolvere il tuo problema