Как визуализировать реагирующий компонент из имени строки

Question

Я хочу динамически визуализировать компонент реакции из его строкового имени. Вот что я сделал, но это не сработает. Это можно сделать? Пример действительно поможет.

string_name - это имя компонента.

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

Answer 1

Ключ немного не хватает, и я не знаю, если это документировано в любом месте, но вы должны использовать заглавную букву для компилятора JSX (?), Чтобы recoginise его как тип.

import AllComponents from 'Components'; 

const FooType = 'Foo'; 

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

Edit - По комментариям

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

Edit 2

Наши типичные приложения, которые делают компоненты динамически, как правило, имеют индекс. js-файл в корне каталога всех компонентов, этот сим PLE перечислить все возможные компоненты:

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

Тогда все, что вам нужно сделать, это что-то вроде:

import AllComponents from './index.js'; 

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

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

Answer 2

Одна вещь, которую вы можете сделать, это требует компонент ребенка внутри MyComponent и сделать его в ответ. Напишите свою настраиваемую функцию для динамического отображения компонента в Ребенке, а затем введите его в MyComponent.

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; 

Ниже приводится родительский компонент.

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> 
    ); 
} 
});