Rendering di una stringa come componente React

Question

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'esempio

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

Answer 1

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

Answer 2

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.

Answer 3

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