Adına göre bir Yanıt Oluşturma bileşeni oluşturma

Question

Bağlam: Widget tabanlı bir web uygulaması geliştiriyorum (kullanıcıların igetirmek istedikleri iGoogle seçenleri gibi). Her widget bir React bileşenidir.

Basitleştirilmiş örnek: Sistem sebat katmandan tercihlerimi aldığında İşte 2 farklı widget

var HelloWidget = React.createClass({ 
    render: function() { return <div>Hello {this.props.name}</div>; } 
}); 

var HiWidget = React.createClass({ 
    render: function() { return <div>Hi {this.props.name}</div>; } 
}); 

Bir kullanıcı olarak, ben HiWidget seçmiş ve benim adım "dostum" bu yüzden benziyor Bu: Ben bir dize var adını olduğunda

var dataFromDb = { 
    type: 'HiWidget', 
    name: 'dude' 
}; 

Nasıl bir bileşeni tepki işleyebilen?

Ben Dynamically Rendering a React component dayanarak, bu çalıştı:

React.render(
    <dataFromDb.type name={dataFromDb.name} />, 
    document.getElementById('try2') 
); 

O 0.11 Tepki çalışmak için kullanılan, ama artık değil.

Ve dev switch deyimi zorunda kalmamak için istiyorum: Sen bileşen türü için arama olarak bir nesneyi kullanmak ve tutmak http://jsfiddle.net/61xdfjk5/

Answer 1

: Burada bu kodla

switch (dataFromDb.type) { 
    case 'HiWidget': 
     var component = <HiWidget name={dataFromDb.name} />; 
     break; 
    case 'HelloWidget': 
     var component = <HelloWidget name={dataFromDb.name} />; 
     break; 
} 
React.render(
    component, 
    document.getElementById('try3') 
); 

JSFiddle Hepsini bir yerde render ayrıntıları:

var components = { 
    'HiWidget': HiWidget, 
    'HelloWidget': HelloWidget 
} 

var Component = components[dataFromObj.type] 
React.render(
    <Component name={dataFromObj.name}/>, 
    document.getElementById('try3') 
) 

Answer 2

JSX her zaman JS içinde yerli JavaScript sözdizimini kullanabilirsiniz böylece, JavaScript bir üst kümesidir X. Örneğin, bileşenlerin sınıfları küresel alana (window) içinde varsa vardır, aşağıdakileri yapabilirsiniz:

React.render(
    React.createElement(window[dataFromDb.type], {name: dataFromDb.name}), 
    document.getElementById('try2') 
); 

JSFiddle here.