रिएक्ट createFragment का उपयोग कब करें?

Question

मैं में प्रतिक्रिया मूल निवासी, इस चेतावनी प्रतिक्रिया तय करने में कामयाब रहे एक ListView प्रतिपादन कर रहा हूँ, लेकिन मैं कैसे समझ में नहीं आता और क्यों यह काम करता है:

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

// This array generates React Fragment warning. 
var data1 = [{name: "bob"}, {name:"john"}] 

// This array works, no warnings. 
var data2 = [React.addons.createFragment({name: "bob"}), 
      React.addons.createFragment({name: "john"})] 

// This also works, no warnings. 
var data3 = ["bob", "john"] 

class Listings extends React.Component { 
    constructor(props) { 
    super(props) 
    ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 

    this.state = { 
     dataSource: ds.cloneWithRows(data), 
    } 
    } 
    render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <Text>{rowData}</Text>} /> 
    ) 
    } 
} 

एक क्या प्रतिक्रिया है टुकड़ा? प्रतिक्रिया में इसकी आवश्यकता कब है? एक कुंजी वस्तु इस चेतावनी का कारण क्यों बनती है?

Answer 1

मैं आपके प्रश्न में 2 मुख्य बिंदुओं को कवर करने के लिए 2 उत्तरों में अपना उत्तर विभाजित कर रहा हूं।

धारा 1: एक प्रतिक्रिया टुकड़ा क्या है?

आदेश की व्याख्या करने के लिए क्या एक प्रतिक्रिया टुकड़ा है में, हम के बारे में कुंजी प्रतिक्रिया कदम पीछे लेने के लिए और बात करने के लिए की जरूरत है।

कुंजी सहायता प्रतिक्रिया दें कि कौन से आइटम बदल गए हैं, जोड़े गए हैं या हटा दिए गए हैं। तत्वों को स्थिर पहचान (विशिष्टता) देने के लिए उन्हें सरणी के तत्वों को दिया जाना चाहिए।

कुंजी चुनने का सबसे अच्छा तरीका एक स्ट्रिंग का उपयोग करना है जो विशिष्ट रूप से अपने भाई बहनों के बीच एक सूची आइटम की पहचान करता है। अक्सर आप अपने डेटा से कुंजी के रूप में आईडी का उपयोग करेंगे।

render() { 
    const todoItems = todos.map((todo) => 
     <li key={todo.id}> 
     {todo.text} 
     </li> 
    ); 

    return todoItems; 
} 

यह ध्यान रखें कि todoItems वास्तव में <li> तत्वों की एक सरणी है महत्वपूर्ण है: यहाँ एक व्यावहारिक उदाहरण है।

यह जानकर, चलो चलते हैं कि आपको अपने उपयोग-मामले में चेतावनी क्यों मिलती है।

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

यहाँ recently updated React docs से शास्त्रीय उदाहरण है:

function Swapper(props) { 
    let children; 
    if (props.swapped) { 
    children = [props.rightChildren, props.leftChildren]; 
    } else { 
    children = [props.leftChildren, props.rightChildren]; 
    } 
    return <div>{children}</div>; 
} 

बच्चों अनमाउंट और क्योंकि वहाँ किसी भी कुंजी बच्चों के दो सेट पर चिह्नित नहीं कर रहे हैं आप swapped प्रोप बदलने के रूप में पुन: माउंट होगा।

इस समस्या को हल करने के लिए, आप बच्चों के सेट को चाबियाँ देने के लिए createFragment एड-ऑन का उपयोग कर सकते हैं। Follow the enhanced example, using the createFragment here।

---

अनुभाग 2: लेकिन आपको यह चेतावनी क्यों मिल रही है?

वैसे भी, आपको त्रुटि मिल रही त्रुटि केवल इसलिए होती है क्योंकि आप कुछ जेएसएक्स में जावास्क्रिप्ट ऑब्जेक्ट (जेएसएक्स तत्व या स्ट्रिंग के बजाए) को इंटरपोल करने का प्रयास करते हैं।

हालांकि त्रुटि संदेश createFragment का उपयोग करने के लिए इसका सुझाव देता है, इसका कारण यह है कि आप कुछ जेएसएक्स में एक चर को इंटरपोल कर रहे हैं जो स्ट्रिंग या जेएसएक्स तत्व नहीं है, लेकिन वास्तव में कुछ अन्य प्रकार की वस्तु है!

आपके उपयोग-मामले में ऐसी भ्रामक चेतावनी, है ना?:-)