Reagire il componente di rendering usando il suo nome

Question

Sto sperimentando React.js e sta funzionando molto bene. Mi chiedo se è possibile iniettare classi ad altre classi in questo modo:

var Container = React.createClass({ 
    render: function() { 
     <{this.props.implComponent}/> 
    } 
}); 

Supponendo implComponent è stato passato in questo modo:

React.render(
    <Container implComponent="somePredefinedVariable" />, 
    document.getElementById('content') 
); 

Questo non funziona a causa di un errore di sintassi. Posso facilmente capire perché.

In altre parole, mi piacerebbe inserire classi in altre classi in base ai nomi. È possibile? Come lo posso fare?

Answer 1

Eri vicino. È necessario passare la classe del componente stesso (non una stringa), e quindi poiché la sintassi del tag accetta già una variabile, si elimina lo s{} s. Inoltre, non dimenticare di restituire il nodo da render.

var Container = React.createClass({ 
    render: function() { 
     return <this.props.implComponent /> 
    } 
}); 

React.render(
    <Container implComponent={SomePredefinedVariable} />, 
    document.getElementById('content') 
); 

Se si vuole passare una componente di base dom, utilizza una stringa

Questo ha un senso se si pensa al risultato trasformare

var Container = React.createClass({displayName: "Container", 
    render: function() { 
     return React.createElement(this.props.implComponent, null) 
    } 
}); 

ReactDOM.render(
    React.createElement(Container, {implComponent: SomePredefinedVariable}), 
    document.getElementById('content') 
); 

ReactDOM.render(
    React.createElement(Container, {implComponent: "div"}), 
    document.getElementById('content') 
);