2015-03-05 17 views
15

Używam React JS do renderowania zawartości HTML. Problem polega na tym, że nie jestem w stanie zrozumieć konkretnej sekcji kodu, co ona robi.React JS: Objaśnienie funkcji this.props.items.map

Jeśli widzisz podstawową próbkę listęzadańz z linku poniżej 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> 

Jestem w zasadzie nie jest w stanie zrozumieć, co mapa robi i jak tworzyć parametry poz pracują. Może ktoś podać szczegóły na ten sam:

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

Dzięki Ankit

Odpowiedz

37

map nie jest cechą React.js. Możesz wywołać tę funkcję w dowolnej wybranej tablicy. Powinieneś spojrzeć na jego numer documentation at MDN.

Zasadniczo, mapa służy do konwersji tablicy do innej tablicy z modyfikowanymi elementami. Na przykład:

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

zwróciłby nową tablicę tak: [2,3,4]

W przykładzie map służy do konwersji tablicę elementów typu „string” do tablicy React.DOM. li elementy.

autor Twojego przykład można też to zrobić jak ten

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; 
    } 
}); 
4

props to obiekt zawierający właściwości przekazywane od rodzica do elementu podrzędnego. Jest to właściwość o nazwie items, która jest tablicą.

mapuje numer items do tablicy li s.

+0

Dzięki, lubiłem tę funkcję mapy bardzo dużo.Widziałem twoją odpowiedź i spojrzałem na jej dokumentację javascript. –

1

Zajmuje ona tablicę this.props.items, przekazuje każdy element do funkcji createItem, a następnie zwraca tablicę zwróconych wartości każdego połączenia.

specjalnie dla tego kodu, jeśli miał to w this.props.items:

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

można dostać coś takiego od wezwania mapy:

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

this.props.items jest tablicą i map zwracają nowa tablica zgodnie z callback function, które stanowią pierwszy argument, jest łatwo używać ES6 i JSX.

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

W naszym przykładzie będzie to powrót tablicę td's

+0

Czy mógłbyś wytłumaczyć mi ten kod? co to jest obj? jak by to działało, gdyby klucz był uuid? – tatsu

+0

'map' przyjmuje funkcję zwrotną jako pierwszy argument, a' wywołanie zwrotne' wywoływane dla każdego elementu 'tablica', funkcja wywołania zwrotnego daje ci element na pierwszym' parametrze' w naszym przykładzie to 'obj'. możesz użyć 'obj.uuid' –