React: क्लोन एलीमेंट के साथ प्रदान किए गए आवश्यक प्रॉप्स अभी भी कंसोल में एक चेतावनी प्रदर्शित करते हैं

को निर्मित 27 जुल॰ 2015 · 3टिप्पणियाँ · स्रोत: facebook/react

मैंने एक उदाहरण बनाया है इसलिए इसे समझना आसान है, लेकिन मूल रूप से "लापता आवश्यक प्रोप" के कारण कंसोल में एक चेतावनी प्रदर्शित होती है।

प्रोप तत्व को React.cloneElement साथ दिया जाता है, इसलिए मुझे लापता प्रोप की चेतावनी मिलने की उम्मीद नहीं थी। मैं समझता हूं कि यह एक बढ़त का मामला हो सकता है ...

https://jsfiddle.net/kdsvgbzu/1/

<A name="name" value="value">
    <B></B>
</A>

class A extends React.Component {
    render() {
        return (
            <div>
                {React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(child, {
                        name: this.props.name,
                        value: this.props.value
                    });
                }, this)}
            </div>
        );
    }
}

A.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

class B extends React.Component {
    render() {
        return <span>{this.props.name} : {this.props.value}</span>;
    }
}

B.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

स्रोत

tleunen

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

मुझे नहीं पता कि आपका वास्तविक उपयोग-मामला @tleunen क्या था, लेकिन मैंने इस मुद्दे पर एक पुन: प्रयोज्य घटक को लागू करते हुए ठोकर खाई, जिसमें अपने बच्चों को सहारा देने की जिम्मेदारी थी:

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

अंत में, मैंने इस मुद्दे के आसपास काम किया जो मुझे मिला एक और अधिक सुरुचिपूर्ण समाधान है:

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

मुझे यह बहुत अच्छा लगता है क्योंकि ComponentRequiringTheNumber की निर्भरता स्पष्ट है, और NumberSelector की भूमिका स्पष्ट हो जाती है। और इस तरह, नेस्टेड घटक को दिए गए प्रॉप्स का मूल्यांकन तभी किया जाता है जब वह प्रासंगिक हो।

आपके फिडल पर लागू: https://jsfiddle.net/ap1e9rk3/1/

micaste 1 मार्च 2017

👍15 🎉3

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

यह जानबूझकर है; तत्व निर्माण के समय प्रॉप्स को मान्य करने से अधिक उपयोगी त्रुटियां उत्पन्न होती हैं। यह फ्लो जैसे स्थिर प्रकार के सिस्टम के व्यवहार से भी अधिक निकटता से मेल खाता है। अभी के लिए सबसे अच्छा है कि उन प्रॉप्स को वैकल्पिक रूप से चिह्नित किया जाए। हम भविष्य में एक फीचर भी पेश कर सकते हैं जिसे संदर्भ कहा जाता है जो माता-पिता जैसे ए से बी जैसे बच्चे को प्रोप पास करने का एक और समर्थित तरीका देगा।

sophiebits 27 जुल॰ 2015

👍8 😕7 ❤3

बिल्कुल यही मैने सोचा। धन्यवाद @spicyj

tleunen 27 जुल॰ 2015

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

आपके फिडल पर लागू: https://jsfiddle.net/ap1e9rk3/1/

micaste 1 मार्च 2017

👍15 🎉3

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

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

React: क्लोन एलीमेंट के साथ प्रदान किए गए आवश्यक प्रॉप्स अभी भी कंसोल में एक चेतावनी प्रदर्शित करते हैं

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

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

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