ReactJS:this.props.items.map功能的说明

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

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

我基本上无法理解地图的作用以及创建项目参数的工作原理.任何人都可以提供相同的细节:

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

谢谢,Ankit

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 
{this.createItems(this.props.items)}
;
    },
    createItems: function(items){
        var output = [];
        for(var i = 0; i {items[i]});
        return output;
    }
});

props 是包含从父组件传递到子组件的属性的对象.

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

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