Wie man eine Reaktionskomponente aus einem String-Namen rendern kann

Question

Ich möchte dynamisch eine react-Komponente von ihrem String-Namen rendern. Hier ist was ich getan habe, aber es funktioniert nicht. Kann das gemacht werden? Ein Beispiel würde wirklich helfen.

string_name ist der Name der Komponente.

var MyComponent = React.createElement(window[string_name], {}); 
return (
     <div className="wrapper"> 
      <div>Hello World</div> 
      <MyComponent/> 
     </div> 
    ) 

Answer 1

Der Schlüssel bisschen fehlt, und ich weiß nicht, ob es irgendwo dokumentiert ist, aber man braucht einen Großbuchstaben für die JSX Compiler verwenden (?) Es als eine Art zu recoginise.

import AllComponents from 'Components'; 

const FooType = 'Foo'; 

return (
    <div className="wrapper"> 
     <div>Hello World</div> 
     <AllComponents[FooType] /> 
    </div> 
); 

Bearbeiten - Gemäß den Kommentaren

class Foo extends React.Component { 
    render() { 
     return <div>Foo 123</div>; 
    } 
}; 

class Bar extends React.Component { 
    render() { 
     return <div>Bar 123</div>; 
    } 
}; 


class App extends React.Component { 


    render() { 
    const all = { 
     'Foo': Foo, 
     'Bar': Bar,  
    }; 

    // For the sake of the demo, just randomly pick one of the two 
    // usually this would come from an import, or something similar 
    const randomKey = ['Foo', 'Bar'][Math.floor(Math.random() * 2)]; 

    // The resolved component must begin with a capital letter 
    const Type = all[randomKey]; 


    return (
     <div> 
      <Type /> 
     </div>  
    ); 
    } 

}; 


ReactDOM.render(<App />, document.getElementById('root')); 

JSBin: http://jsbin.com/noluyu/5/edit?js,output

bearbeiten 2

Unsere typische Anwendungen, die Komponenten dynamisch machen, in der Regel einen Index haben. Js-Datei an der Wurzel aller Komponenten Verzeichnis, das Sim ple alle möglichen Komponenten auflisten:

// index.js 
export Breadcrumb    from './breadcrumb/Breadcrumb'; 
export Checkbox     from './checkbox/Checkbox'; 
export Comment     from './comment/Comment'; 

alles, was Sie dann ist, wie etwas zu tun haben:

import AllComponents from './index.js'; 

const myType = 'Checkbox'; 
const Type = AllComponents[myType]; 

.. later .. 
return <div><Type /></div>; 

Answer 2

Eine Sache, die Sie tun können innerhalb MyComponent eine untergeordnete Komponente ist erforderlich und es in Ihrer Rückkehr zu machen. Schreiben Sie Ihre benutzerdefinierte Funktion, um die Komponente dynamisch in Child zu rendern, und fordern Sie sie dann in MyComponent an.

var React = require('react'); 

var Names = React.createClass({ 
    render: function(){ 

    // Map the names and loop through 
    var names = this.props.names.map(function(name, index){ 

     return(
      <div> 
       <li className="list-group-item" key={index}> 
        {<h4>{name[index]}</h4>} 

       </li> 
      </div> 
     ) 
    }); 
    } 
}); 

/*We then export the Names component*/ 
module.exports = Names; 

Unten ist die Elternkomponente.

var React = require('react'); 
var Names = require('./Names'); 

var MyComponent = React.createClass({ 
/*This will set the initial state for any state the component handles. usually empty data*/ 
getInitialState: function(){ 
    return { 

     names: ["My Component", "Your Component"] 

    } 
}, 


render: function(){ 

    return(

     <div className="row"> 

      <div className="col-md-4"> 

       <Names names={this.state.names} /> 

      </div> 

     </div> 
    ); 
} 
});