इसके नाम

Question

संदर्भ के आधार पर एक प्रतिक्रिया घटक प्रस्तुत करें संदर्भ: मैं एक विजेट-आधारित वेबपैप विकसित कर रहा हूं, (निष्क्रिय iGoogle की तरह, जहां उपयोगकर्ता चुन सकते हैं कि वे कौन से विजेट प्रदर्शित करना चाहते हैं)। प्रत्येक विजेट एक प्रतिक्रिया घटक है।

सरलीकृत उदाहरण

: यहाँ 2 अलग विगेट्स

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

एक उपयोगकर्ता के रूप में, मैं HiWidget चुना है और मेरा नाम है "दोस्त" इसलिए जब प्रणाली हठ परत से मेरी प्राथमिकताओं हो जाता है यह कैसा दिखता यह:

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

जब मैं स्ट्रिंग var में अपना नाम रखता हूं तो मैं एक प्रतिक्रिया घटक कैसे प्रस्तुत कर सकता हूं?

मैं इस की कोशिश की, पर Dynamically Rendering a React component आधारित:

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

यह प्रतिक्रिया 0.11 के साथ काम करता था, लेकिन अब नहीं।

और मैं एक विशाल स्विच बयान होने से बचाने के लिए करना चाहते हैं: http://jsfiddle.net/61xdfjk5/

Answer 1

आप घटक प्रकार के लिए एक देखने के रूप में किसी चीज़ का इस्तेमाल और रख सकता है: यह सब कोड यहाँ के साथ

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 एक ही स्थान पर यह प्रतिपादन के विवरण:

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

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

Answer 2

JSX जावास्क्रिप्ट का सुपरसेट है, ताकि आप हमेशा जे एस के अंदर देशी जावास्क्रिप्ट सिंटैक्स का उपयोग कर सकते हैं एक्स। उदाहरण के लिए, यदि आपका घटकों के वर्गों वैश्विक अंतरिक्ष (window) में उपलब्ध हैं, तो आप निम्न कर सकते हैं:

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

JSFiddle here।