React: पोर्टल और एसएसआर के साथ हाइड्रेट करते समय अप्रत्याशित चेतावनी

को निर्मित 15 अप्रैल 2018 · 24टिप्पणियाँ · स्रोत: facebook/react

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?

बग

वर्तमान व्यवहार क्या है?

निम्नलिखित (सरलीकृत) स्निपेट को देखते हुए:

class HoverMenu extends React.Component {
  render() {
    if (typeof document === 'undefined') return null
    const root = document.getElementById('root')
    return ReactDOM.createPortal(<div>Hello World</div>, root)
  }
}

class Para extends React.Component {
  render() {
    return (
      <span>
        Some Text
        <HoverMenu />
      </span>
    )
  }
}

जहाँ div#root एक मान्य div जो मौजूद है, एसएसआर के बाद हाइड्रेटिंग करते समय निम्न त्रुटि दिखाई जाती है:

Warning: Expected server HTML to contain a matching <div> in <span>

यदि मैं HoverMenu की परिभाषा को अपडेट करता हूं तो चेतावनी चली जाती है:

class HoverMenu extends React.Component {
  componentDidMount() {
    this.setState({ isActive: true })
  }
  render() {
    const { isActive} = this.state
    if (!isActive) return null
    const root = document.getElementById('root')
    return ReactDOM.createPortal(<div>Hello World</div>, root)
  }
}

मैं setState componentDidMount वजह से दोहरे रेंडरिंग के कारण ऐसा नहीं करना चाहूंगा।

मुझे यह समझ में नहीं आया कि वह त्रुटि मुझे क्या बता रही है। कोई <div /> किसी भी मामले में सर्वर-साइड प्रदान नहीं किया गया है। त्रुटि विशेष रूप से भ्रमित करने वाली है, क्योंकि HoverMenu DOM div भी DOM span अंदर प्रदान नहीं की गई है। (मुझे आश्चर्य है कि ऐसा हो रहा है क्योंकि HoverMenu रिएक्ट span अंदर निहित है।)

अपेक्षित व्यवहार क्या है?

कोई त्रुटि नहीं है। या, कम से कम त्रुटि संदेश स्पष्ट है।

रिएक्ट के कौन से संस्करण और कौन से ब्राउज़र / OS इस समस्या से प्रभावित हैं?

क्रोम 65
प्रतिक्रिया 16.2
(SSR नेक्स्ट 5.1 के माध्यम से)

medium Bug good first issue

स्रोत

majelbstoat

👍11

सबसे उपयोगी टिप्पणी

जबकि हाइड्रेटिंग पोर्टल्स समर्थित नहीं हैं (https://github.com/facebook/react/issues/13097), संदेश स्वयं समझ में नहीं आता है। हमें इसकी जांच करने और इसे ठीक करने की आवश्यकता होगी।

gaearon 2 अग॰ 2018

👍8

सभी 24 टिप्पणियाँ

मेरे पास एक समान मुद्दा है, जिसे सेटस्टेट के माध्यम से क्लाइंट पर फिर से रेंडर करके भी हल किया जा सकता है।
मेरे मामले में, मैं एक पोर्टल के अंदर एक मॉडल को प्रस्तुत करने का प्रयास करता हूं। Modal घटक सर्वर पर प्रदान किए जाने पर null देता है और क्लाइंट पर एक पोर्टल बनाता है। हालाँकि, हाइड्रेशन के बाद DOM गड़बड़ हो जाता है।

उदाहरण के लिए, यदि मैं इसे अपने मुख्य घटक के अंदर उपयोग करता हूं:

<Modal>
This is a test
</Modal>

<div className="some-div-after-the-modal">
</div>

जलयोजन के बाद इसे प्राप्त करने के बजाय:

<!-- Inside the portal container -->
<div class="modal-wrapper">
    <div class="modal-content">This is a test</div>
</div>

<!-- In the main component -->
<div class="some-div-after-the-modal">
</div>

मैंने इसे प्राप्त किया:

<!-- Inside the portal container -->
<div class="some-div-after-the-modal">
    <div class="modal-content">This is a test</div>
</div>

<!-- In the main component -->
<div class="some-div-after-the-modal">
</div>

और चेतावनी समान है ( Expected server HTML to contain a matching <div> in <div> )। मैं कस्टम SSR विधि के साथ React 16.3 का उपयोग करता हूं।

मुझे यकीन नहीं है अगर यह इच्छित व्यवहार है।

interphx 16 अप्रैल 2018

gaearon 2 अग॰ 2018

👍8

@gaearon फिक्स का उद्देश्य है

[] पता लगाता है कि पोर्टल हाइड्रेट () में इस्तेमाल किया जा रहा है और फिर इनवेरिएंट द्वारा त्रुटि संदेश को और अधिक ठीक से फेंक दिया जाता है।
जैसे invariant violation: Portal is not support on SSR. For more detail, please refer https://github.com/facebook/react/issues/13097
[] टेस्ट जोड़ें
- [] यदि पोर्टल हाइड्रेट () के साथ प्रयोग किया जाता है, तो उपरोक्त त्रुटि संदेश फेंकना चाहिए

सही?
अगर यह जरूरी नहीं है तो मैं तैयार हूं।

मैं वेबसाइट रेपो के लिए SSR डॉक ड्राफ्ट की योजना बना रहा हूं, इसलिए मुझे हाइड्रेट मैकेनिज्म से परिचित होना है।
मुझे लगता है कि यह जांच मेरी योजना के लिए मददगार होगी।
https://github.com/facebook/react/pull/13379

ryota-murakami 30 अग॰ 2018

"कुछ भी नहीं" रेंडर करने के लिए भी पोर्टल एसएसआर पर समर्थित क्यों नहीं हैं?

ljharb 30 अग॰ 2018

ऐसा नहीं लगता है कि कुछ भी प्रदान करना सबसे अच्छा नहीं है - मैं नहीं देखता कि क्या पोर्टल सामग्री अलग है जिसे हम सर्वर रेंडरिंग के लायक नहीं मानते हैं।

हम संभवतः सस्पेंस के लिए सर्वर रेंडरर के सुधार के साथ एक साथ इस पर वापस आएंगे।

gaearon 30 अग॰ 2018

👍5

पोर्टल वैचारिक रूप से केवल-ग्राहक घटक हैं; आमतौर पर सर्वर पर रेंडर करने के लिए नहीं चाहते हैं कि मोडल जैसी चीजों के लिए उपयोग किया जाता है - वे भी एक डोम तत्व लेते हैं, जो रेंडर करता है क्योंकि कोई डोम नहीं है। मैं यह नहीं देखता कि सर्वर पर उनके साथ किए जाने वाले कुछ सार्थक कैसे हैं - मैं सिर्फ फेंकने से मूल्यवान कुछ भी नहीं देखता हूं।

ljharb 30 अग॰ 2018

मॉडल्स जैसी चीजों के लिए इस्तेमाल किया जाता है

यह एक उपयोग का मामला है, लेकिन साइडबार और इसी तरह के अन्य भी हैं जो आवश्यक रूप से केवल ग्राहक नहीं हैं।

वे एक तत्व भी लेते हैं

सही - वर्तमान डिजाइन में। यह बदल सकता है। https://github.com/facebook/react/pull/8386#issuecomment -262375265

मैं भी फेंकने से मूल्यवान कुछ नहीं देखता।

फेंकने का मूल्य स्पष्ट रूप से स्वीकार करना है कि पोर्टल काम नहीं करेगा। आप इसके चारों ओर {domNode && ReactDOM.createPortal(stuff, domNode)} या समान के साथ आसानी से काम कर सकते हैं। क्योंकि आपको पहले से ही यह निर्धारित करने के लिए कुछ प्रकार की जाँच करनी थी कि क्या आप DOM नोड प्राप्त कर सकते हैं - इसलिए इस बिंदु पर आपके पास पर्याप्त डेटा होना चाहिए ताकि आप पोर्टल को खाली न कर सकें।

gaearon 30 अग॰ 2018

👍5

मैं इसे अपने "अच्छे पहले अंक" के रूप में ठीक करना चाहूंगा

brandonvilla21 10 सित॰ 2018

lvguoying 3 अक्तू॰ 2018

क्या मैं इस मुद्दे पर काम कर सकता हूं?

joseantonjr 6 अक्तू॰ 2018

ज़रूर। मुझे लगता है कि आप कर सकते हैं। तो आप कितनी दूर गए हैं? मैं वास्तव में इसे भी उठाने की सोच रहा हूं।

engprodigy 23 अक्तू॰ 2018

yjang4 28 अक्तू॰ 2018

हाय दोस्तों, किसी भी विचार कैसे मैं फ़ाइल मिल सकती है जहां समस्या है, मैं इसे प्राप्त कर सकते हैं कृपया कुछ मदद करें।

ELBEQQAL94 20 अप्रैल 2019

अरे यहाँ इस मुद्दे के लिए आंशिक पुल अनुरोध है
https://github.com/facebook/react/pull/15473

VariableVasasMT 23 अप्रैल 2019

अभी भी कोई है? मैं इसे लेना पसंद करूंगा।

nileshgulia1 18 मई 2019

इसकी स्थिति क्या है? मैं इसे कैसे पुन: पेश कर सकता हूं?

j-stuckey 20 मई 2019

क्या यह अभी भी एक मुद्दा है?

dhulwells 15 जून 2019

मुझे इस मुद्दे पर कोई प्रतिक्रिया नहीं मिली है।

j-stuckey 16 जून 2019

मेरा मानना है कि इस मुद्दे की स्थिति अभी भी खुली है।

MuraliSRao 10 फ़र॰ 2020

क्या मैं इस मुद्दे को उठा सकता हूं?

JeremiahKamama 16 फ़र॰ 2020

नमस्कार, क्या कोई इस मुद्दे पर काम कर रहा है? अगर नहीं तो मैं इसे लेना चाहूंगा।

akolbuszewski 22 अप्रैल 2020

👍1

अगर कोई इस पर काम नहीं कर रहा है, तो मैं कर सकता हूं

DiasKazhtai 2 मई 2020

क्या यह अभी भी एक मुद्दा है? ऐसा लगता है कि इसे ठीक करने के प्रयास किए गए थे, लेकिन अंतर्निहित समस्या यह है कि कुछ लोग वास्तव में सर्वर-साइड रेंडरिंग पर काम करना चाहते हैं? अगर ऐसा है तो क्या यह मुद्दा बंद हो सकता है?

JoaoVitoGomes 15 जून 2020

एक दिव्य तत्व जोड़ना ठीक काम करना चाहिए

`वर्ग पैरा React.Component {
प्रस्तुत करना() {
वापसी (

कुछ पाठ

}
} `

nikikalwar 26 सित॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: पोर्टल और एसएसआर के साथ हाइड्रेट करते समय अप्रत्याशित चेतावनी

सबसे उपयोगी टिप्पणी

सभी 24 टिप्पणियाँ

संबंधित मुद्दों