ReactJS 的 this.props.items.map 属性是什么？

本文应该帮助您理解有关使用“map”方法遍历和显示表示 ReactJS 中组件的相似对象列表的概念。标题“this.props.items.map”可以是任何其他地图方法，例如“this.props.profiles.map”，下面有示例，其中配置文件或项目表示一个数组。它可以用来创建列表、表格等。如果我遗漏了一个或多个要点，请随时发表评论/建议。

以下是本文的要点：

地图不是 ReactJS 的一个特性
查看在 this.props.profiles.map 上下文中使用“map”的代码示例
地图不是 ReactJS 的一个特性

在查看此 ReactJS 教程页面上提供的教程（其中引用 .map 以显示 Comment 对象）后，您可能会感到困惑，并认为“map”是 ReactJS 的一项功能。事实上，这是一个标准的 JavaScript 函数，可以在任何数组上调用。查看有关此的 MDN 文档。

如果您使用过 Python（apply 方法）或 R（lapply 方法）等语言，您可能已经使用“map”作为一种方法来传递函数，该函数的参数表示存储在数组中的对象的引用。当调用“map”时，该函数将应用于存储在数组中的每个对象。 “地图”返回一个新数组，该数组由可能使用传递数组的对象创建的对象组成。

一般语法是： array.map(func)

其中 func 应该采用一个参数。

如上文所述，array.map 的返回值是另一个数组。

在 this.props.profiles.map 的上下文中使用“map”的代码示例

在下面的示例中，请注意以下一些事项：

有两个组件，例如 UserProfiles 和 Profile
配置文件组件用于表示包含名称和国家属性的实际配置文件。
UserProfiles，顾名思义，用于表示一个或多个配置文件并渲染配置文件组件。
请注意，向 UserProfiles 传递了一个 json 对象，例如 profilesJson，它由以 JSON 对象形式表示的配置文件组成。
UserProfiles 的 render 方法显示使用“map”方法创建的“allProfiles”变量。反过来，“map”方法返回一个数组 Profile 对象。

以下是以下代码示例在 HTML 上的显示方式：


 <div id="content"></div>
<script type="text/jsx">
var profilesJson = [
{name: "Pete Hunt", country: "USA"},
{name: "Jordan Walke", country: "Australia"}];
var Profile = React.createClass({
render: function(){
return(
<div>
<div>Name: {this.props.name}</div>
<div>Country: {this.props.country}</div>
<hr/>
</div>
);
}
});
var UserProfiles = React.createClass({
render: function(){
var allProfiles = this.props.profiles.map(function(profile){
return (
<Profile name={profile.name} country={profile.country} />
);
});
return(
<div>{allProfiles}</div>
);
}
});
React.render( <UserProfiles profiles={profilesJson}/>, document.getElementById( "content"));</script>

ReactJS 的 this.props.items.map 属性是什么？

相关文章