Что такое свойство ReactJS this.props.items.map?
Это должно помочь вам понять принципы использования метода «map» для обхода и отображения спискапохожих объектов, представляющих компонент в ReactJS.Заголовок «this.props.items.map» может быть любым другим методом карты, например «this.props.profiles.map», в котором ниже приведены примеры, где профили или элементы представляют массив.Его можно использовать для создания списка, таблицы и т. Д.
Вот основные положения этой статьи:
- Карта НЕ является функцией ReactJS
- Посмотрите пример кода с использованием «map» в контексте this.props.profiles.map
После просмотра учебника, представленного на этой ReactJS tutorials странице, где есть ссылка.Карта создана для отображения объектов комментариев, можно запутаться и подумать, что «карта» - это функция ReactJS.На самом деле это стандартная функция JavaScript, которую можно вызывать для любого массива
Если вы работали с такими языками, как Python (метод apply) или R (метод lapply), вы, вероятно,использовал «map» в качестве метода для передачи функции с параметром, представляющим ссылку на объект, хранящийся в массиве.Когда вызывается «map», функция применяется к каждому из объектов, хранящихся в массиве.«Карта» возвращает новый массив, состоящий из объектов, которые могут быть созданы с использованием объектов переданного массива
Общий синтаксис: array.map(func)
, где func должен принимать один параметр.
Как упомянуто в тексте выше, возвращаемым значением array.map является другой массив.
Пример кода с использованием «map» в контексте this.props.profiles.map
В приведенном ниже примере обратите внимание на некоторые из следующих вещей:
- Существует два компонента, такие как UserProfiles и Profile
- Компонент профиля используется для представления фактического профиля, состоящего из атрибутов имени и страны.
- UserProfiles, как это звучит, используется для представления одного или нескольких профилей и визуализации компонентов профиля.
- Обратите внимание, что UserProfiles передается объект json, такой как profileJson, который состоит из профилей, представленных в формеобъекта JSON.
- В методе рендеринга UserProfiles отображается переменная «allProfiles», созданная с помощью «map»метод.Метод «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>