React.js: आप एक घटक आइटम की स्थिति कैसे बदलते हैं

Question

आप एक घटक आइटम की स्थिति को कैसे प्रतिक्रिया में बदलते हैं? जब तक मैं इसे गलत समझा गया है

, key, जो डोम में data-reactid का प्रतिनिधित्व करती है द्वारा आदेश सूची आइटम प्रतिक्रिया है, लेकिन मैं कैसे पृष्ठ पर घटकों के key संशोधित करने के लिए पता नहीं है।

यानी आप घटक को कैसे पकड़ते हैं, इसे key बदलें, और उसके बाद एक रेंडर आग लगाना ताकि आपके द्वारा सेट किए गए क्रम में पुनर्नवीनीकरण सूची प्रस्तुत की जा सके?

उदा। निम्नलिखित कोड उदाहरण में, जब Click me लिंक क्लिक किया गया है, तो पहली सूची आइटम अंतिम सूची आइटम के साथ बदल दिया जाएगा।

आदर्श रूप से, यह कार्यक्षमता आपको render विधि में घटकों के क्रम को बदले बिना पृष्ठ पर किसी भी घटक को गतिशील रूप से पुन: व्यवस्थित/स्थानांतरित करने की अनुमति देगी। https://github.com/bengrunfeld/gae-react-flux-todos

var TodoBox = React.createClass({ 
    render: function(){ 
    return (
     <div className="todo-container"> 
     <h4>GAE React Flux Todos</h4> 
     <TodoList data={this.state.data} /> 
     </div> 
    ) 
    } 
}); 

var TodoList = React.createClass({ 
    changePosition: function(e){ 
    // Change position of list item (e.g. to top/certain position/end of list) 
    }, 
    render:function(){ 
    var todoNodes = this.props.data.map(function(todo) { 
     return (
     <Todo key={todo.id} id={todo.id}> 
      {todo.todoText} 
     </Todo> 
    ); 
    }); 
    return (
     <form className="todoList"> 
     {todoNodes} 
     <a onClick={this.changePosition}>Click me</a> 
     </form> 
    ) 
    } 
}); 

var Todo = React.createClass({ 
    render:function(){ 
    return (
     <div className="todoItem"> 
     <input type="text" className={this.props.id} onChange={this.checkInput} defaultValue={this.props.children} ref="todoItem"/> 
     </div> 
    ) 
    } 
}); 

Answer 1

key प्रोप तत्व ऑर्डर करने के लिए है, लेकिन यह अलग render कॉल के बीच reconciliate करने के लिए इस्तेमाल नहीं कर रहा है:

यहाँ रेपो के लिए एक लिंक जहां पूर्ण परियोजना स्थित है। उसी key वाले तत्वों को फिर से प्रस्तुत नहीं किया जाएगा बल्कि डीओएम को बेहतर रूप से अपडेट करने के लिए एक दूसरे के खिलाफ भिन्न होगा। देखें Reconciliation

यदि आप तत्वों को पुन: व्यवस्थित करना चाहते हैं, तो आपको अपनी जेएसएक्स में या तत्व एरे में अपनी स्थिति बदलनी होगी, जिसे आप render विधि (todoNodes) में बच्चों के रूप में पास करते हैं।

आपके मामले में, आप तो this.setState({data: reorderedData}) की तरह कुछ के साथ अपने changePosition विधि में है कि प्रतिलिपि को अपडेट TodoList घटक राज्य में this.props.data की एक प्रतिलिपि बनाने सकता है। उस प्रतिलिपि को बनाने के लिए एक अच्छी जगह getInitialState में होगी।

की render विधि अपने TodoList उसके बाद फिर से कहा जा सकता है, और आप अपने नव this.state.data पुनर्क्रमित से अधिक नक्शा Todo तत्वों अपनी पसंद के अनुसार आदेश दिया की एक सरणी बनाने के लिए होगा।

हालांकि, ध्यान रखें कि props in getInitialState is an anti-pattern। चूंकि आपका डेटा आपके TodoBox घटक की स्थिति में रहता है, इसलिए इससे बचने का एक तरीका आपके TodoList घटक this.props.onReorder(reorderedData) को changePosition विधि में रखना होगा। आपके TodoBox घटक तब एक ईवेंट हैंडलर को TodoList बच्चे को पास कर सकते हैं, और जब भी इस हैंडलर को कॉल किया जाता है तो नए डेटा के साथ अपने राज्य को अपडेट कर सकते हैं।

var TodoBox = React.createClass({ 
    handleReorder: function(reorderedData) { 
    this.setState({data: reorderedData}); 
    }, 

    render: function(){ 
    return (
     <div className="todo-container"> 
     <h4>GAE React Flux Todos</h4> 
     <TodoList data={this.state.data} onReorder={this.handleReorder} /> 
     </div> 
    ) 
    } 
}); 

var TodoList = React.createClass({ 
    changePosition: function(e){ 
    // Change position of list item (e.g. to top/certain position/end of list) 
    // Create a copy of this.props.data and reorder it, then call 
    // this.props.onReorder to signal to the parent component that 
    // the data has been reordered 
    this.props.onReorder(reorderedData); 
    }, 

    render:function() { 
    var todoNodes = this.props.data.map(function(todo) { 
     return (
     <Todo key={todo.id} id={todo.id}> 
      {todo.todoText} 
     </Todo> 
    ); 
    }); 
    return (
     <form className="todoList"> 
     {todoNodes} 
     <a onClick={this.changePosition}>Click me</a> 
     </form> 
    ) 
    } 
}); 

Answer 2

कुंजी का उपयोग किसी अन्य चीज़ के लिए किया जाता है, क्रमबद्ध करने के लिए नहीं। प्रतिक्रिया अपने आंतरिक वर्चुअल डीओएम संचालन को अनुकूलित करने के लिए key एस का उपयोग करती है। इसका मतलब है कि आप प्रतिक्रिया देते हैं कि "इन भाई बहनों के आदेश से कोई फर्क नहीं पड़ता, व्यक्तिगत भाई अभी भी इस कुंजी द्वारा पहचाना जाता है"। इस तरह प्रतिक्रिया यह जानती है कि क्या इसे अनावश्यक रूप से सामान फेंकने के बिना पुरानी पुन: उपयोग करके नए भाई बहनों को पूर्ववत करना, डालना, हटाना या जोड़ना चाहिए।

आपके सॉर्टिंग प्रश्न के लिए: भाई बहनों के क्रम को बदलने के लिए, बस जावास्क्रिप्ट सरणी this.props.data को सॉर्ट करें।