React JS: Giải thích về tính năng this.props.items.map

Question

Tôi đang sử dụng React JS để hiển thị nội dung HTML. Vấn đề là tôi không thể hiểu được phần mã cụ thể những gì nó làm.

Nếu bạn có thể nhìn thấy một mẫu cơ bản của một danh sách Todo từ liên kết dưới đây 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> 

tôi về cơ bản không có khả năng để hiểu những gì đồ không và làm thế nào tạo ra các tham số mục đang làm việc. bất cứ ai có thể cung cấp chi tiết về giống nhau:

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

Cảm ơn, Ankit

Answer 1

map không phải là một tính năng của React.js. Bạn có thể gọi hàm này trên bất kỳ mảng nào bạn muốn. Bạn nên xem số documentation at MDN cho điều đó.

Về cơ bản, bản đồ là để chuyển đổi mảng thành mảng khác với các mục đã sửa đổi. Ví dụ:

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

sẽ trả về một mảng mới như thế này: [2,3,4]

Trong ví dụ của bạn, bản đồ được sử dụng để chuyển đổi một mảng với các vật phẩm kiểu "chuỗi" tới một mảng của React.DOM. các phần tử li.

Các autor ví dụ của bạn cũng có thể làm nó như thế này

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 là một đối tượng chứa thuộc tính truyền từ cha mẹ đến một bộ phận trẻ em.

Vì vậy, props.items là thuộc tính có tên items là một mảng.

props.item.map() ánh xạ items vào một mảng li s.

Answer 3

Sẽ mất this.props.items mảng, chuyển từng mục đến hàm createItem và sau đó trả về một mảng giá trị trả lại của mỗi cuộc gọi.

Cụ thể cho mã đó, nếu bạn đã có trong this.props.items:

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

Bạn sẽ nhận được một cái gì đó như thế này từ cuộc gọi bản đồ:

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

Answer 4

this.props.items là một mảng và map trả lại mảng mới theo callback function cung cấp như một đối số đầu tiên, nó được bỏ dễ dàng để sử dụng ES6 và JSX.

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

Trong ví dụ của chúng tôi nó sẽ trở lại mảng của td's