React JS: Spiegazione della funzione this.props.items.map

Question

Sto utilizzando React JS per il rendering del contenuto HTML. Il problema è che non sono in grado di capire la particolare sezione del codice che cosa fa.

Se è possibile vedere un esempio di base di un elenco Todo dal link sottostante 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> 

io in fondo non in grado di capire che cosa mappa fa e come creare parametri voce stanno lavorando. Qualcuno potrebbe fornire dettagli sulla stessa:

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

Grazie, Ankit

Answer 1

map non è una caratteristica di React.js. Puoi chiamare questa funzione su qualsiasi array tu voglia. Si dovrebbe guardare il suo documentation at MDN per quello.

Fondamentalmente, la mappa è per convertire una matrice in un'altra matrice con elementi modificati. Per esempio:

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

sarebbe restituire un nuovo array come questo: [2,3,4]

Nel tuo esempio, la mappa viene utilizzato per convertire un array con elementi di tipo "stringa" per una serie di React.DOM. li elementi.

L'autore del vostro esempio potrebbe anche avere fatto in questo modo

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 è un oggetto che contiene le proprietà passarono da un genitore di un componente figlio.

Quindi props.items è la proprietà denominata items che è una matrice.

props.item.map() mappa il items arrary a un array di li s.

Answer 3

Ci vorrà l'array this.props.items, passare ogni elemento alla funzione createItem e quindi restituire un array dei valori restituiti di ciascuna chiamata.

In particolare per quel codice, se tu avessi questo this.props.items:

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

Si otterrebbe qualcosa di simile dalla chiamata mappa:

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

Answer 4

this.props.items è un array e restituire il map nuovo array secondo callback function che fornisce come primo argomento, è facile smettere di usare ES6 e JSX.

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

Nel nostro esempio tornerà serie di td's