मेरा कोड:


const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />
          <AnotherChild className="mr-3" />
        </Nav>
)};

जैसा कि ऊपर दिए गए कोड में देखा गया है, मैंने useRef हुक का उपयोग करके एक संदर्भ बनाया है और इसे अपने पेरेंटकंपोनेंट से जोड़ा है। अब लक्ष्य प्रोप के माध्यम से चाइल्डकंपोनेंट को पास कर रहा हूं और बच्चे के अंदर कुछ डोम मैनिपुलेशन करने के लिए इसका इस्तेमाल कर रहा हूं।

समस्या : मुझे घटक के पहले रेंडर के लिए ParentReference शून्य के रूप में मिल रहा है। (यदि मैं पेरेंट रेफरेंस के परिवर्तन पर पुन: प्रस्तुत करने के लिए बाध्य करता हूं तो यह पूरे घटक को अद्यतन और पुन: प्रस्तुत करेगा तो इसका मूल्य होगा।)

प्रारंभिक रेंडर के लिए मेरे बच्चे घटक के अंदर पेरेंट रेफरेंस कैसे प्राप्त करें?

1
Sravan Reddy 14 अप्रैल 2020, 14:14

1 उत्तर

सबसे बढ़िया उत्तर

SegFault का इस उत्तर का संदर्भ सही है। आपका रेफरी यह आपके घटक के पहले प्रस्तुतीकरण के बाद तक प्रारंभ नहीं हुआ है। तो जब आप अपना <ChildComponent target={ParentReference.current} /> प्रस्तुत करते हैं, तो रेफरी अभी तक परिभाषित नहीं है।

इस परिदृश्य में आप पहले रेंडर पर एक स्टेट वेरिएबल सेट करने के लिए useEffect का उपयोग करने पर विचार कर सकते हैं, और स्टेट वेरिएबल सेट होने के बाद <ChildComponent /> को सशर्त रूप से रेंडर कर सकते हैं।

const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

// define state variable defining the ref as not yet ready
const [refReady, setRefReady] = useState(false)
// On first mount, set the variable to true, as the ref is now available
useEffect( () => {
  setRefReady(true)
}, [])

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          {refReady && <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />}
          <AnotherChild className="mr-3" />
        </Nav>
)};
2
Seth Lutske 14 अप्रैल 2020, 17:59