Объекты
Допустим есть объект items
:
var items = [ {name: "JavaScript", id: "1"}, {name: "ES 5", id: "2"}, {name: "React", id: "3"} ]
Добавить данный объект в React-приложение можно в методе constructor()
, а вывести на странице можно через метод map()
.
class Items extends React.Component { constructor(props) { super(props); // создание объектов this.state = {items: [ {name: "JavaScript"}, {name: "ES 5"}, {name: "React"} ]}; } render() { return ( <div className="react-app"> <ul> // 1-ый способ: вывод напрямую {this.state.items.map((item, index) => ( <li key={item.id}>{item.name}</li> ))} // 2-ой способ: вывод через компонент {this.state.items.map((item, index) => ( <ListItem key={item.id} data={item} /> ))} </ul> </div> ); } } // Вывод данных в элементе "#app" ReactDOM.render(<Items />, document.getElementById("app"));
Объекты надо создавать внутри объекта this.state
, т.е. просто задать this.items
будет неправильно, т.к. объекты не будут обновляться в приложении.
Также стоит обратить внимание, что при выводе элементов добавлен атрибут key
. Данный атрибут надо обязательно указывать для элементов массива, т.к. они помогают определять, какие элементы были изменены, добавлены или удалены.
В случае использования компонентов (как во втором примере выше), то атрибут key
надо указывать только для компонента.
В качестве значения key
рекомендуется указывать id
элемента, чтобы не было ошибок вывода элементов, например после смены сортировки. Если данного параметра нет, то можно использовать index
.
Значение для key
должно быть уникально только в пределах текущего цикла.
В результате будет сгенерирован HTML:
<ul> <li>JavaScript</li> <li>ES 5</li> <li>React</li> </ul>
Авторизуйтесь, чтобы добавлять комментарии