मैं प्रतिक्रिया घटक के रिटर्न फ़ंक्शन में आईआईएफई का उपयोग कैसे कर सकता हूं?

Question

मैं जब उपयोगकर्ता एक बटन क्लिक करता है अप पॉपिंग एक मॉडल पेज है, यह पूरी तरह से काम कर रहा है:

render() { 
    return (
    <div> 
     <section> 
      <button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button> 
     </section> 
     <SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal"> 
      Text that appears inside the modal page 
      <Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button> 
     </SkyLight> 
    </div> 
)} 

• लेकिन मेरा लक्ष्य स्वचालित रूप से जब उपयोगकर्ता पहली बार के लिए पृष्ठ खुलता है मोडल खोलने के लिए है।

• मैं

एक बटन पर क्लिक प्रश्न द्वारा मोडल पेज खोलने के लिए नहीं करना चाहती:

• मैं एक Iife एक तुरंत-लागू समारोह अभिव्यक्ति का उपयोग कर सकते हैं () जैसे ही उपयोगकर्ता पृष्ठ खोलता है, मोडल खोलने के लिए?

• मेरा दृष्टिकोण एक बूलियन को सत्य पर सेट करना था। तब मोडल खोलने मान सत्य

लाइब्रेरी मोडल के लिए इस्तेमाल किया जा रहा करने के लिए सेट किया गया है: https://github.com/marcio/react-skylight

Answer 1

मुझे लगता है कि आप देख रहे हैं componentDidMount() जीवन चक्र विधि है:

componentDidMount() { 
    this.refs.simpleDialog.show(); 
} 

React docs से:

componentDidMount() तुरंत लागू करने के बाद एक घटक माउंट किया गया है है। प्रारंभिकता जिसके लिए डीओएम नोड्स की आवश्यकता होती है, यहां जाना चाहिए। यदि आपको रिमोट एंडपॉइंट से डेटा लोड करने की आवश्यकता है, तो यह नेटवर्क अनुरोध को तुरंत चालू करने के लिए एक अच्छी जगह है। इस विधि में राज्य को सेट करने से पुनः प्रतिपादन ट्रिगर होगा।

अन्य component lifecycle methods चेकआउट करने के लिए स्वतंत्र महसूस करें।

Answer 2

एक मॉडल घटक पर खोले गए माउंट, बस isVisible सही पर सेट किया

<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">