React JS:this.props.items.map功能的说明

Question

我正在使用React JS来渲染HTML内容.问题是我无法理解代码的特定部分它的作用.

如果您可以从以下链接http://facebook.github.io/react/看到Todo列表的基本示例

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

谢谢,Ankit

Answer 1

map不是React.js的功能.您可以在任何所需的阵列上调用此函数.您应该在MDN上查看其文档.

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

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

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

在您的示例中,map用于将具有"string"类型的项的数组转换为React.DOM.li元素的数组.

你的例子的autor也可以像这样做

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 是包含从父组件传递到子组件的属性的对象.

所以props.items被命名为财产items这是一个数组.

props.item.map()将itemsarrary 映射到lis 的数组.