JS tepki: Açıklama HTML içeriği oluşturma için JS tepki kullanıyorum this.props.items.map özelliğin

Question

arasında. Sorun, kodun belirli bir bölümünü ne yaptığını anlayamıyorum. aşağıdaki bağlantı 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> 

bir Todo List temel bir örneğini görebiliyorsanız

anlamaya temelde mümkün değildir neysem haritası yapar ve madde parametreleri çalışıyoruz oluşturmak nasıl. Herkes aynı hakkında ayrıntılı bilgi Could:

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

sayesinde Ankit

Answer 1

map React.js bir özelliği değildir. İstediğiniz herhangi bir dizide bu işlevi çağırabilirsiniz. Bunun için documentation at MDN'a bakmalısınız.

Temel olarak, harita değiştirilmiş öğeler ile başka bir dizi için bir dizi dönüştürmek içindir. Örneğin :

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

böyle yeni bir dizi döndürür: [2,3,4]

sizin örnekte, harita React.DOM bir diziye türü "dize" öğeleri içeren bir dizi dönüştürmek için kullanılır. li elemanlar.

sizin örnek autor de bu

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 gibi yapmış olabilir çocuk bileşenine bir ebeveynden geçirilen özelliklere içeren bir nesnedir.

Yani props.items bir dizi olduğu items adında bir özelliktir.

props.item.map(), li s dizisine items yönünü eşleştirir.

Answer 3

this.props.items dizisini alır, her öğeyi createItem işlevine geçirir ve her aramanın döndürülen değerlerinin bir dizisini döndürür. Bu kod için Spesifik

, sen this.props.items bu olsaydı:

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

Harita çağrısından böyle bir şey alırdım:

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

Answer 4

this.props.items bir dizidir ve dönüş map İlk argüman olarak sağlayan callback function'a göre yeni dizi, ES6 ve JSX'i kullanmaktan vazgeçiliyor.

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

Örneğimizde bu td's