javascript - React JS : Explanation of this. props.items.map 功能

Question

我正在使用 React JS 呈现 HTML 内容。问题是我无法理解特定代码部分的作用。

如果您可以从下面的链接中看到待办事项列表的基本示例<强> 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>

我基本上无法理解 ma​​p 的作用以及创建项目参数的工作原理。任何人都可以提供相同的详细信息:

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

谢谢，安 git

Answer 1

map 不是 React.js 的特性。你可以在任何你想要的数组上调用这个函数。你应该看看它的documentation at MDN为此。

基本上，map 用于将一个数组转换为另一个具有修改项的数组。例如:

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

会像这样返回一个新数组:[2,3,4]

在您的示例中，map 用于将项目类型为“string”的数组转换为 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;
    }
});