Javascript React JS：this.props.items.map 特性说明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28880279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React JS: Explanation of this.props.items.map feature
提问by Ankit Tanna
I am using React JS for Rendering the HTML content. The issue is I am not able to understand particular section of code what it does.
我正在使用 React JS 来呈现 HTML 内容。问题是我无法理解代码的特定部分它的作用。
If you can see a basic sample of a Todo List from the below link http://facebook.github.io/react/
如果您可以从以下链接中看到 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>
I am basically not able to understand what mapdoes and how create item parameters are working. Could anyone provide details on the same:
我基本上无法理解地图的作用以及创建项目参数的工作方式。任何人都可以提供相同的详细信息：
var TodoList = React.createClass({
render: function(){
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
Thanks, Ankit
谢谢，安吉特
回答by Van Coding
mapis not a feature of React.js. You can call this function on any array you want. You should look at its documentation at MDNfor that.
map不是 React.js 的特性。你可以在任何你想要的数组上调用这个函数。你应该在 MDN 上查看它的文档。
Basically, map is for converting an array to another array with modified items. For example:
基本上，map 用于将一个数组转换为另一个具有修改项的数组。例如：
[1,2,3].map(function(item){
return item+1;
})
would return a new array like this: [2,3,4]
将返回一个像这样的新数组： [2,3,4]
In your example, map is used to convert an array with items of type "string" to an array of React.DOM.li elements.
在您的示例中， map 用于将具有“字符串”类型项目的数组转换为 React.DOM.li 元素数组。
The autor of your example could also have done it like this
你的例子的作者也可以这样做
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;
}
});
回答by helpermethod
propsis an object containing properties passed from a parent to a child component.
props是一个包含从父组件传递给子组件的属性的对象。
So props.itemsis the property named itemswhich is an array.
所以props.items被命名为财产items这是一个数组。
props.item.map()maps the itemsarrary to an array of lis.
props.item.map()将items数组映射到lis的数组。
回答by Briguy37
It will take this.props.itemsarray, pass each item to the createItemfunction, and then return an array of the returned values of each call.
它将获取this.props.items数组，将每个项目传递给createItem函数，然后返回每个调用返回值的数组。
Specifically for that code, if you had this in this.props.items:
专门针对该代码，如果您在this.props.items：
["Item 1 text", "Item 2 text", ..]
You'd get something like this from the map call:
你会从 map 调用中得到这样的信息：
["<li>Item 1 text</li>","<li>Item 2 text</li>",..]
回答by Umair Ahmed
this.props.itemsis an array and mapreturn the new array according to callback functionthat provide as an first argument, it is quit easy to using ES6 and JSX.
this.props.items是一个数组，并map根据callback function提供的第一个参数返回新数组，使用 ES6 和 JSX 很容易。
<tr> { this.arr.map((obj, i) => <td key={i}> {obj.name} </td>) } </tr>
<tr> { this.arr.map((obj, i) => <td key={i}> {obj.name} </td>) } </tr>
In our example it will return array of td's
在我们的例子中，它将返回数组td's
