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

Question

मैं अपना "स्मार्ट" पॉपअप घटक बनाने की कोशिश करता हूं, जो अपने आप में कुछ घटकों को खोल सकता है, लेकिन मेरा अहसास अच्छा नहीं है, क्योंकि यह काम नहीं करता है।

मैं पॉपअप बनाने के लिए रेडक्स दृष्टिकोण का उपयोग करता हूं और पॉपअप खोलने की क्रिया पॉपअप खुलने से पहले प्रतिपादन के लिए किसी भी घटक का नाम प्राप्त करने में सक्षम होता है;

लेकिन मैं मैं चुन सकते हैं और नाम nameOfComponent साथ घटक रेंडर करने के लिए की जरूरत है कुछ समस्या, पैरामीटर प्राप्त करने के बाद, हमारे मामले में यह nameOfComponent है है,।

और अब मेरा प्रश्न है, यह सरणी से घटक कैसे प्रस्तुत कर सकता है?

// He's my components 
import Login from '../Login/login.js'; 
import Logout from '../Logout/logout.js'; 


const popupContent = { 
    Login : Login, 
    logout: Logout 
}; 

// My component 
class Popup extends Component { 

    componentDidUpdate() { 
     // for example 
     const nameOfComponent = "Login"; 

     this.body = this.setBodyPopup(nameOfComponent); 

     return true; 
    } 

    setBodyPopup(property){ 
     return popupContent[property]; 
    } 


    render() { 
     // I want to render some element from popupContent here 
     <div> 
      // <this.body /> // it's jsx format 
      {this.body} 
     </div> 
    } 
} 

Answer 1

टिप्पणीकारों का सुझाव के रूप में, आप या तो निर्माता में या विधि में ही प्रस्तुत करना भीतर this.body निर्दिष्ट करने के लिए चाहते हो सकता है।

हालांकि, अगर मैं आपके इरादे को सही ढंग से समझता हूं, तो आप इसके बजाय this.props.children का उपयोग कर सकते हैं। ईजी।

<Popup><MyInnerComponent></Popup> 

और पॉपअप render विधि

render() { 
    <div> 
     {this.props.children} 
    </div> 
} 

Answer 2

में वास्तव में प्रतिक्रिया आप JSX वाक्य रचना के साथ चर का उपयोग करने के लिए घटकों का दृष्टांत देता है। आपको वास्तव में <this.body /> पर कॉल करने में सक्षम होना चाहिए और इसे काम करना चाहिए; हालांकि आपका नहीं होगा क्योंकि आप this.body को componentDidUpdate विधि तक परिभाषित नहीं करते हैं, जिसका अर्थ यह है कि इसे पहले प्रस्तुत करने और सब कुछ तोड़ने के लिए अपरिभाषित किया जाएगा। मैं this.body के बजाय स्थानीय घटक स्थिति का उपयोग करने का सुझाव दूंगा और यह सुनिश्चित कर दूंगा कि इसे शुरुआत से परिभाषित किया गया है।

कम से कम, कुछ मूल्य के लिए एक निर्माता में this.body का दृष्टांत:

constructor(props) { 
    super(props); 
    this.body = 'Login'; 
} 

Answer 3

आप <this.body /> उपयोग कर सकते हैं घटक रेंडर करने के लिए, जब तक this.body एक वास्तविक मूल्य नहीं है के रूप में। शायद आप बस की जरूरत है:

render() { 
    return <div> 
     {this.body ? <this.body /> : null} 
    </div> 
} 

उदाहरण आप दे दी है के साथ है, हालांकि, आप बस के बजाय constructor में अपने componentDidMount की सामग्री को रख सकते हैं, क्योंकि निर्माता से पहले पास पहले प्रस्तुत करना शुरू हो जाती है।

Answer 4

मैं यहाँ JSfiddle ReactJS

काम कर उदाहरण जोड़ा तुम न JSX उपयोग करना होगा। यदि आप करते हैं, तो ऐसा करने का सही तरीका कारखाना का उपयोग करना है। आप रेंडर विधि में नियमित HTML भी प्रस्तुत कर सकते हैं, साथ ही घुंघराले ब्रेसिज़ का उपयोग करके अपने कोड में वेनिला जावास्क्रिप्ट का उपयोग भी कर सकते हैं।

इसके अलावा प्राप्त करने के लिए

नीचे उदाहरण देखें मैं विधि प्रस्तुत करना में सरणी में अपने सभी आइटम के माध्यम से मानचित्रण और पुनरावृत्ति की सलाह देते हैं और एक एक करके उन्हें एक प्रस्तुत करना होगा:

var Login = React.createClass({ 
 
    render: function() { 
 
    return <div>{this.props.name}, logged in</div>; 
 
    } 
 
}); 
 

 
// React with JSX 
 
ReactDOM.render(<Login name="John" />, 
 
    document.getElementById('containerJSX')); 
 

 
// React without JSX 
 
var Login = React.createFactory(Login); 
 
ReactDOM.render(Login({ name: 'Tim' }), 
 
    document.getElementById('containerNoJSX'));

Answer 5

मैं आपको लगता है dangerouslySetInnerHtml जैसे कुछ देख रहे हैं।

<div dangerouslySetInnerHTML={this.body} />