क्या कुछ वैश्विक स्टोर में आईफ्रेम उदाहरण रखने के लिए कोई तरीका है और केवल आवश्यक होने पर इसे डोम पर माउंट करें?
हाँ, आप, लेकिन अगर आप भी डोम से एक iframe को हटा दें और इसे बाद में फिर से संलग्न कर सकता है यह अभी भी पुनः लोड हो जाता है, तो यह है कि रास्ते में समस्या वास्तव में बहुत कम प्रतिक्रिया के घटक पेड़ से कोई लेना देना नहीं है। आपको वास्तव में क्या चाहिए अपने आईफ्रेम को छिपाएं और बाद में इसे फिर से दिखाएं।
आप निश्चित रूप छिपाने के कर सकते थे और iframe दिखाने में इस तरह प्रतिक्रिया:
{ <iframe src="..." style={{display: this.state.showing ? "block" : "none"}} /> }
इस मामले आप कुछ जगह है कि नहीं अनमाउंट कर पाने पर iframe प्रस्तुत करना करने की जरूरत है। अगर आप आईफ्रेम को दिखाने/छिपाने के लिए ऊपर की ओर संवाद करने के लिए अपने पेड़ में घटकों का उपयोग कर सकते हैं।
लेकिन क्या तुम सच में छिपा/अलग कि घुड़सवार और अनमाउंट कर पाने के अपने घटक पेड़ में स्थानों से आइफ्रेम दिखाने के लिए, आप कर सकते हैं करने के लिए सक्षम होना चाहते हैं, लेकिन यह काफी थोड़ा जटिल काम है और एक विशिष्ट नहीं हो जाता है, तो प्रतिक्रिया का उपयोग-मामला।
आपको डोम आईफ्रेम स्वयं बनाना होगा और इसे कहीं भी डीओएम में जोड़ना होगा जो रिएक्ट के घटक पेड़ के बाहर है (यह आम तौर पर प्रतिक्रिया में एक विरोधी पैटर्न है)। फिर आप घुड़सवार और अनमाउंट किए जाने पर इस DOM तत्व को दिखाने/छिपाने के लिए प्रॉक्सी घटक का उपयोग कर सकते हैं।
यहाँ एक उदाहरण है कि document.body के लिए एक iframe संलग्न कर देता है और यह पता चलता है जब एक घटक माउंट किया गया है, और यह खाल जब घटक को अनमाउंट है:
class WebView extends React.Component {
static views = {};
componentDidMount() {
if (!WebView.views[this.props.url]) {
WebView.views[this.props.url] = this.createWebView(this.props.url);
}
WebView.views[this.props.url].style.display = "block";
}
componentWillUnmount() {
WebView.views[this.props.url].style.display = "none";
}
createWebView(url) {
let view = document.createElement("iframe");
view.src = this.props.url;
document.body.appendChild(view);
return view;
}
render() {
return null;
}
}
Here it is working on CodePen: नोटिस कि जब आप को छिपाने (अनमाउंट) तो WebView आईफ्रेम स्थिति (उदाहरण के लिए खोज इनपुट) दिखाएं (माउंट) वही रहता है।
आपको अपने लेआउट में सही ढंग से दिखाई देने के लिए आईफ़्रेम को स्थान और आकार देने की भी आवश्यकता होगी। मैंने यह नहीं दिखाया है क्योंकि आम तौर पर हल करना थोड़ा मुश्किल है।
ध्यान दें कि यह समाधान "portal" pattern के समान है। यहां अंतर यह है कि अपने राज्य को सुरक्षित रखने और पुनः लोड करने से रोकने के लिए कभी भी आईफ्रेम को अनमाउंट न करें।