React JS: Объяснение функции this.props.items.map

Я использую React JS для рендеринга содержимого HTML. Проблема в том, что я не могу понять конкретный раздел кода, что он делает.

Если вы видите базовый образец списка Todo из приведенной ниже ссылки 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>;
                        }
                });

Спасибо, Анкит

Ответы

Ответ 1

map не является функцией React.js. Вы можете вызвать эту функцию на любом массиве, который вы хотите. Вы должны посмотреть на документацию в MDN для этого.

В основном, карта предназначена для преобразования массива в другой массив с измененными элементами. Например:

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

будет возвращать новый массив следующим образом: [2,3,4]

В вашем примере карта используется для преобразования массива с элементами типа "строка" в массив элементов React.DOM.li.

Автору вашего примера также можно было сделать это следующим образом

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

Ответ 2

props - объект, содержащий свойства, переданные от родителя к дочернему компоненту.

Итак props.items - это свойство с именем items, которое является массивом.

props.item.map() отображает приращение items в массив из li s.

Ответ 3

Он примет массив this.props.items, передаст каждый элемент функции createItem, а затем вернет массив возвращаемых значений каждого вызова.

В частности, для этого кода, если у вас есть это в this.props.items:

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

Вы получили бы что-то вроде этого из вызова карты:

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

Ответ 4

this.props.items - это массив и map возвращает новый массив в соответствии с callback function, который предоставляет в качестве первого аргумента, он легко может быть использован с ES6 и JSX.

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

В нашем примере он вернет массив td's