प्रतिक्रिया जेएस: इस.props.items.map सुविधा का स्पष्टीकरण

Question

मैं HTML सामग्री को प्रस्तुत करने के लिए प्रतिक्रिया जेएस का उपयोग कर रहा हूं। मुद्दा यह है कि मैं कोड के विशेष अनुभाग को समझने में सक्षम नहीं हूं।

आप नीचे दिए गए लिंक http://facebook.github.io/react/

<script type='text/jsx'> 
     /** @jsx React.DOM */ 

     var TodoList = React.createClass({ 
       render: function(){ 
         var createItem = function(itemText) { 
          return <li>{itemText}</li>; 
         }; 
         return <ul>{this.props.items.map(createItem)}</ul>; 
        } 
      }); 

     var TodoApp = React.createClass({ 
       getInitialState: function(){ 
        return {items:[], text: ''} 
       }, 
       onChange: function(e) 
       { 
        this.setState({text: e.target.value}); 
       }, 
       handleSubmit: function(e) 
       { 
        e.preventDefault(); 
        var nextItems = this.state.items.concat([this.state.text]); 
        var nextText = '' 
        this.setState({items: nextItems, text: nextText}); 
       }, 
       render:function(){ 
        return (
         <div> 
          <h3>ToDo List</h3> 
          <TodoList items={this.state.items}/> 
          <form onSubmit={this.handleSubmit}> 
           <input type="text" onChange={this.onChange} value={this.state.text}/> 
           <button>Add #{this.state.items.length+1}</button> 
          </form> 
         </div> 
        ) 
       } 
      }); 

     React.render(<TodoApp />, document.getElementById('toDoListApp')); 
    </script> 

से एक कार्यसूची की एक बुनियादी नमूना देख सकते हैं मैं मूल रूप से समझने में सक्षम नहीं कर रहा हूँ क्या नक्शा करता है और कैसे बना सकता हूँ आइटम मानकों काम कर रहे हैं। किसी को भी एक ही पर विवरण प्रदान किया जा सका:

var TodoList = React.createClass({ 
        render: function(){ 
          var createItem = function(itemText) { 
           return <li>{itemText}</li>; 
          }; 
          return <ul>{this.props.items.map(createItem)}</ul>; 
         } 
       }); 

धन्यवाद, अंकित

Answer 1

map React.js की सुविधा नहीं है। आप इस फ़ंक्शन को अपनी इच्छित सरणी पर कॉल कर सकते हैं। इसके लिए आपको इसके documentation at MDN पर देखना चाहिए।

असल में, मानचित्र संशोधित वस्तुओं के साथ किसी सरणी में किसी सरणी को परिवर्तित करने के लिए है। उदाहरण के लिए:

[1,2,3].map(function(item){ 
    return item+1; 
}) 

इस तरह एक नई सरणी वापसी होगी: [2,3,4]

अपने उदाहरण में, नक्शा React.DOM की एक सरणी के लिए के प्रकार "स्ट्रिंग" आइटम के साथ एक सरणी परिवर्तित करने के लिए प्रयोग किया जाता है। ली तत्व

अपने उदाहरण के लेखक भी इस

var TodoList = React.createClass({ 
    render: function(){ 
     return <ul>{this.createItems(this.props.items)}</ul>; 
    }, 
    createItems: function(items){ 
     var output = []; 
     for(var i = 0; i < items.length; i++) output.push(<li>{items[i]}</li>); 
     return output; 
    } 
}); 

Answer 2

props है जैसे कि यह किया जा सकता है एक माता पिता से एक बच्चे घटक के लिए पारित गुण युक्त एक वस्तु है।

तो props.itemsitems नाम की संपत्ति है जो एक सरणी है।

props.item.map()li एस की सरणी के लिए ARARY को मानचित्र करता है।

Answer 3

यह this.props.items सरणी लेगा, प्रत्येक आइटम को createItem फ़ंक्शन पर पास करें, और फिर प्रत्येक कॉल के लौटाए गए मानों की एक सरणी वापस करें।

कि कोड के लिए

विशेष रूप से, आप this.props.items में यह था:

["Item 1 text", "Item 2 text", ..] 

आप मानचित्र कॉल से कुछ इस तरह मिल चाहते हैं:

["<li>Item 1 text</li>","<li>Item 2 text</li>",..] 

Answer 4

this.props.items एक सरणी है और map वापसी callback function के अनुसार नई सरणी जो पहली तर्क के रूप में प्रदान करती है, इसे ES6 और JSX का उपयोग करना आसान छोड़ दिया जाता है।

<tr> { this.arr.map((obj, i) => <td key={i}> {obj.name} </td>) } </tr>

हमारे उदाहरण में इसके बारे में td's