React JS：this.props.items.map 特性的解释

Question

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

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

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

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

谢谢，安琪特

Answer 1

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

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

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

会 return 一个像这样的新数组：[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;
    }
});

Answer 2

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

所以 props.items 是名为 items 的属性，它是一个数组。

props.item.map() 将 items 数组映射到 li 数组。

Answer 3

它将采用 this.props.items 数组，将每个项目传递给 createItem 函数，然后 return 一个包含每个调用的 returned 值的数组。

专门针对该代码，如果您在 this.props.items 中有此代码：

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

你会从地图调用中得到这样的东西：

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

Answer 4

this.props.items 是一个数组，map return 根据 callback function 提供的新数组作为第一个参数，使用 ES6 和 JSX 很容易退出.

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

在我们的示例中，它将 return 数组 td's

React JS：this.props.items.map 特性的解释

React JS: Explanation of this.props.items.map feature

html

javascript

reactive-programming

reactjs