मैं प्रतिक्रिया 16 का उपयोग कर रहा हूं और पोर्टल की आवश्यकता है, लेकिन इस सुविधा पर कोई दस्तावेज नहीं ढूंढ पा रहा हूं। क्या किसी को अभी तक इसका उपयोग करने का तरीका पता है?प्रतिक्रिया 16 में ReactDOM.createPortal() का उपयोग कैसे करें?
https://github.com/facebook/react/pull/10675
किसी भी सलाह के लिए धन्यवाद।
प्रतिक्रिया v16 ने कुछ घंटों पहले (वाई !!) जारी किया है जो आधिकारिक तौर पर Portal का समर्थन करता है।
पोर्टल क्या है? चूंकि यह कितना समय रहा है?
पोर्टल्स एक प्रथम श्रेणी रास्ता एक डोम नोड कि माता-पिता घटक के डोम पदानुक्रम के बाहर मौजूद है में बच्चों को प्रस्तुत करने के लिए प्रदान करते हैं।
Portal प्रतिक्रिया समुदाय में नई अवधारणा नहीं है। कई पुस्तकालय उपलब्ध हैं जो इस तरह की कार्यक्षमता का समर्थन करते हैं। उदाहरण react-portal और react-gateway।
कोई प्रतिक्रिया ऐप प्रस्तुत करते समय क्या होता है?
आम तौर पर, किसी भी प्रतिक्रिया अनुप्रयोग को प्रस्तुत करते समय, एक एकल डीओएम तत्व का उपयोग पूरे प्रतिक्रिया पेड़ को प्रस्तुत करने के लिए किया जाता है।
class HelloReact extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));
आप हम प्रदान कर रहे हैं देख सकते हैं हमारे आईडी root होने एक डोम तत्व में घटक प्रतिक्रिया होती है।
पोर्टल क्या है और इसकी आवश्यकता क्यों है? यह वहाँ क्यों है?
पोर्टल प्रस्तुत करना एक तरह से कर रहे हैं संदर्भ प्रतिक्रिया खोने के बिना माता पिता के घटक के मुख्य डोम पदानुक्रम के बाहर बच्चों प्रतिक्रिया। मैं इस पर जोर दे रहा हूं क्योंकि react-router, redux जैसे बहुत लोकप्रिय पुस्तकालय प्रतिक्रिया संदर्भ का भारी उपयोग करते हैं। तो Portal का उपयोग करते समय संदर्भ उपलब्धता बहुत उपयोगी है।
react डॉक्स के अनुसार,
पोर्टलों के लिए एक विशिष्ट उपयोग के मामले है जब एक माता पिता घटक एक अतिप्रवाह है: छिपा हुआ या z- सूचकांक शैली है, लेकिन आप के लिए बच्चे की जरूरत है नेत्रहीन के "बाहर तोड़" इसके कंटेनर उदाहरण के लिए, संवाद, होवरकार्ड, और टूलटिप।
तो, पोर्टल के साथ, आप आवश्यकता होने पर एक और डीओएम नोड पर समानांतर प्रतिक्रिया पेड़ प्रस्तुत कर सकते हैं। भले ही इसे विभिन्न डोम नोड में प्रस्तुत किया गया हो, फिर भी मूल घटक बेकार घटनाओं को पकड़ सकता है। दस्तावेज़ों में दिए गए codepen को देखें। जबकि <h1>Hello World</h1>#root टैग के अंदर प्रदान की गई है,
// index.html
<html>
<body>
<div id="root"></div>
<div id="another-root"></div>
</body>
</html>
// index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');
class HelloFromPortal extends React.Component {
render() {
return (
<h1>I am rendered through a Portal.</h1>
);
}
}
class HelloReact extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
{ ReactDOM.createPortal(<HelloFromPortal />, portalContainer) }
</div>
);
}
}
ReactDOM.render(<HelloReact />, mainContainer);
https://codesandbox.io/s/62rvxkonnw
आप DevTools तत्व का निरीक्षण किया और देखते हैं कि <h1>I am rendered through a Portal.</h1>#another-root टैग के अंदर प्रदान की गई है का उपयोग कर सकते हैं:
नीचे दिए गए उदाहरण अपने अधिक से पता चलना चाहिए।
आशा इस मदद करता है :)
अद्यतन: @PhillipMunin's comment उत्तर देने के लिए।
क्या
ReactDOM.renderऔरReactDOM.createPortalके बीच अलग है?
हालांकि घटक पोर्टल के माध्यम से प्रदान की गई कहीं और हो जाता है (वर्तमान कंटेनर जड़ बाहर), यह एक ही मूल घटक के बच्चे के रूप में उपस्थित रहता है। (ReactDOM.createPortal किसने आह्वान किया) तो बच्चे पर किसी भी घटना को माता-पिता के लिए प्रचारित किया जाता है। (OFC, यदि आप मैन्युअल रूप से ईवेंट के प्रचार को रोकते हैं तो यह काम नहीं करता है।)
उसी संदर्भ पोर्टल के माध्यम से प्रस्तुत घटक के अंदर पहुंच योग्य है। लेकिन इस मामले में जब हम सीधे ReactDOM.render करते हैं।
मैंने अपने बिंदु को चित्रित करने के लिए एक और डेमो बनाया है। https://codesandbox.io/s/42x771ykwx
'{ReactDOM.createPortal (...)}' के बजाय '{ReactDOM.render (
@ फिलिपमुनिन पोर्टलों में सहेजे गए संदर्भ के अलावा, घटनाएं प्रचारित होती हैं। '
प्रस्तुत करने के बजाय ReactDOM.unstable_renderSubtreeIntoContainer के बारे में क्या? इसे संदर्भ पास करना चाहिए, घटना –
पोर्टल createPortal विधि को आपके घटक के render विधि के अंदर कॉल करके बनाए जाते हैं।
render() {
return (
<div>
{ReactDOM.createPortal(this.renderPortal(), this.props.portalEl)}
</div>
)
}
renderPortal सामग्री पोर्टल के अंदर प्रदान की जा करने के लिए वापस चाहिए, जबकि portalEl एक बाहरी DOM एलीमेंट की सामग्री प्राप्त होगा।
किसी ने हाल ही में लिखा है कि पोर्टल पर जानकारी React tests में मिल सकती है।
https://facebook.github.io/react/docs/portals.html –
दस्तावेज़ बहुत स्पष्ट रूप से व्याख्या करते हैं कि उनका उपयोग कैसे करें ... क्या आपने उन्हें पढ़ा? – ndugger
@ndugger हाँ, डॉक्स अब काफी अच्छे हैं :)। लेकिन ओपी ने 2 दिन पहले सवाल पूछा था। प्रतिक्रिया v16 तब जारी नहीं किया गया था। इसे आज जारी किया गया था और आज भी दस्तावेज़ उपलब्ध कराए गए थे। –