React: एक संदर्भ के बच्चे को क्लोन करना उपभोक्ता भ्रामक चेतावनी और त्रुटि पैदा करता है

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

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?
यह एक बग है, या कम से कम अधिक सटीक चेतावनियों और त्रुटि संदेशों के लिए अनुरोध है।

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

मैं कुछ गुणों को जोड़ने के लिए बच्चों की क्लोनिंग कर रहा था और मैंने इस बात को अनदेखा कर दिया कि उपभोक्ता उप-संदर्भ को क्लोन नहीं किया जाना चाहिए ...

import React from 'react';
import {render} from 'react-dom';

const { Provider, Consumer} = React.createContext();

const Comp = ({children})=> <Provider>{cloneKids(children)}</Provider>;

const cloneKids=(children)=>React.Children.map(children, child =>
                           React.cloneElement(child, child.props,
                                  child.props.children&&
                                  cloneKids(child.props.children)));
render(
    <Comp><Consumer>{console.log}</Consumer></Comp>,
    document.getElementById('root')
);

कोड # 12241 के साथ पेश की गई चेतावनी और त्रुटि पैदा करता है

चेतावनी: एक संदर्भ उपभोक्ता को कई बच्चों, या एक बच्चे के साथ प्रदान किया गया था जो एक फ़ंक्शन नहीं है। एक संदर्भ उपभोक्ता एक एकल बच्चे की अपेक्षा करता है जो एक फ़ंक्शन है। यदि आपने कोई फ़ंक्शन पास किया है, तो सुनिश्चित करें कि उसके आसपास कोई अनुगामी या अग्रणी व्हाट्सएप नहीं है।

और (और भी भ्रामक)

TypeError: रेंडर एक फ़ंक्शन नहीं है

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

हो सकता है कि React.cloneElement को क्लोन कार्यों का प्रयास नहीं करना चाहिए? जो कुछ भी करता है, परिणाम एक कार्य नहीं है।

चेतावनी भाग "एक बच्चा जो एक फ़ंक्शन नहीं है" को अन्य चेतावनियों से अलग किया जाना चाहिए। एक ही समय में एक से अधिक बच्चे और एक बच्चा नहीं हो सकता है, जो एक समारोह नहीं है, इसलिए अधिक सटीक चेतावनी जारी की जा सकती है।

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

Stackblitz / Chrome 65 में 16.3.0 और Chrome 65 और Firefox 59 में 16.3.2 पर प्रतिक्रिया के साथ परीक्षण किया गया

Question

स्रोत

cristianbogdan

👍1

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

यह मुद्दा cloneElement (इसमें संदर्भ के लिए कोई विशेष तर्क नहीं है), लेकिन आप props.children (जो इस मामले में एक फ़ंक्शन है) से Children.map() (जो कार्यों की उम्मीद नहीं करता है)। Children.map केवल नियमित React नोड्स के साथ काम करता है।

शायद Children.map एक चेतावनी दिखा सकता है जब यह एक ऐसी चीज का सामना करता है जो एक रिएक्ट नोड नहीं है।

या तो मामले में गहराई से प्रतिक्रिया पेड़ों की क्लोनिंग की तरह लगता है जैसे आप कुछ करने की कोशिश कर रहे हैं रिएक्ट के लिए डिज़ाइन नहीं किया गया था। आप इसकी आवश्यकता क्यों है?

gaearon 25 अप्रैल 2018

👍2

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

gaearon 25 अप्रैल 2018

👍2

धन्यवाद!

मैं कुछ बाल संपत्तियों के मूल्यांकन में देरी कर रहा हूं जब तक कि माता-पिता उनके मूल्यांकन के लिए संदर्भ प्रदान करने के लिए तैयार नहीं होते। उदाहरण के लिए:

<Parent ><Child prefix-prop="string expression"></Parent>
(अभिव्यक्ति की भाषा जावास्क्रिप्ट नहीं है और इसका दूरस्थ रूप से मूल्यांकन किया जाता है। मैं बालकों को नियंत्रित नहीं करता, और बच्चों की कोई भी संख्या हो सकती है)।

बच्चा आंतरिक रूप से कुछ इस तरह हो जाता है:

<Child prop={evaluate("string expression")} />

यह पूरा करने के लिए, माता-पिता बच्चों का दौरा करते हैं और "उपसर्ग-प्रोप" संपत्ति को "प्रोप" संपत्ति में बदल देते हैं, जिसमें अभिव्यक्ति मूल्य होता है। क्लोनिंग एकमात्र ऐसा तरीका है जो मुझे घटक गुणों को बदलने के लिए मिला है। बेशक संदर्भ उपभोक्ताओं को क्लोन नहीं किया जाना चाहिए, वहां परिवर्तन करने के लिए कोई गुण नहीं हैं।

मुझे पता है कि मुझे फंक्शन-एज़-चाइल्ड या रेंडर फ़ंक्शन या समान (मूल्यांकन में देरी के लिए) का उपयोग करना चाहिए, लेकिन मैं एक प्रोटोटाइप लाइब्रेरी और अपने उपयोगकर्ताओं (जो HTML और JSP से आते हैं, और अक्सर HTML और अभिव्यक्ति की भाषा से परे नौसिखिए हैं) डिजाइन कर रहा हूं शायद इस धारणा की सराहना नहीं करेंगे:

<Parent>{ context=> <Child prop={context.evaluate(x)} />}</Parent>

(इसके अलावा, यदि वे फ़ंक्शन से ठीक पहले एक स्थान भूल जाते हैं, तो वे # 12689 द्वारा भ्रमित होंगे)

और वे जल्दी से इस फॉर्म को नहीं समझेंगे:
<Parent display={ context=> <Child prop={context.evaluate(x)} />} />

प्रसंग उपभोक्ता भी फ़ंक्शन-एश-चाइल्ड का उपयोग करते हैं, इसलिए उन्हें एक ही समस्या है।

यह बहुत प्रारंभिक कार्य है इसलिए मैं अभी भी विकल्पों पर विचार कर रहा हूं, लेकिन मैं किसी भी तरह पहले चरण में एक स्वच्छ माता-पिता-बच्चे की धारणा पर पहुंचना चाहता हूं। संभवतः मुझे एक बाबेल प्लगइन लिखना चाहिए जो "क्लीन" नोटेशन को कार्यात्मक के रूप में बदलता है।

लेकिन शायद मुझे कुछ याद आ रहा है इसलिए मैं किसी भी इनपुट की सराहना करूंगा। मैं वास्तव में अपने उपयोगकर्ताओं को जेएसपी को छोड़ने और रिएक्ट को अपनाने के लिए पसंद करूंगा लेकिन अगर नोटेशन बहुत अधिक गूढ़ है, तो ऐसा नहीं होगा ...

cristianbogdan 25 अप्रैल 2018

एक और विचार जो मैं कर रहा हूं वह एक कार्यात्मक माता-पिता है, शायद घटक (किसी तरह का HOC) लौटा रहा है

({context})=>
context.parent("context expression",
     context2=><Child prop={context2.evaluate("sub-expression")} context={context2} />)

जहाँ बच्चे में फिर से संदर्भ हो सकता है।

निश्चित रूप से माता-पिता () उस संदर्भ के उपभोक्ता को एक संदर्भ में प्रस्तुत कर सकते हैं)

()=>
parent("context expression",
     context2=><Child prop={context2.evaluate("sub-expression")} />)

_ यहाँ समस्या यह है कि अभिभावक () एक घटक होने के कारण प्रतिक्रिया के संदर्भ तक पहुँच सकते हैं, लेकिन मूल्यांकन () मेरी जानकारी के लिए नहीं कर सकते जब तक कि यह एक घटक नहीं लौटाता।

जब आप वास्तव में एक संपत्ति सेट करने की कोशिश कर रहे हैं तो यह संभव नहीं है।

इसलिए मेरा मानना है कि बाहरी घटकों से प्रतिक्रिया के संदर्भ तक पहुंच आदर्श होगी। कुछ इस तरह

React.getContext(Consumer, data=> ...)

अगर मुझे सही याद है, तो इससे जूझने के दौरान, मैंने कंज़्यूमर.ट्रेंडर () को मैन्युअल रूप से टेस्ट फ्रेमवर्क का उपयोग करने के लिए आमंत्रित करने की कोशिश की, लेकिन मुझे कुछ भी सार्थक नहीं मिला।

पुनश्च: ऊपर दिया गया पहला अंक गुप्त लग सकता है, लेकिन यह वास्तव में वर्तमान JSP फॉर्म से काफी परिचित है, इसलिए मुझे लगता है कि मैं इसे उपयोगकर्ताओं को बेच सकता हूं :)

<context:parent ctx="context-expression">
   HTML...<context:evaluate expr="sub-expression" />...HTML
</context:parent>

cristianbogdan 26 अप्रैल 2018

बंद होने जा रहा है क्योंकि ऐसा नहीं लगता है कि यह अक्सर आता है।

gaearon 2 अग॰ 2018

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

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

React: एक संदर्भ के बच्चे को क्लोन करना उपभोक्ता भ्रामक चेतावनी और त्रुटि पैदा करता है

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

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

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