Допустим, это render()
метод некоего компонента Component1
render() {
const list = this.state.array.map(
item => ( <Component2 key={item.id}/> ));
return (<div> { list } </div>);
}
В моём понимании, компонент это сама функция или класс, которые его определяют.
Но мне нужно показать иерархию элементов и компонентов в этом коде.
Я бы сказал так, Component1
состоит из элемента list
, который включает в себя набор компонентов Component2
, который в свою очередь также состоит из каких-то элементов.
Напрашивается вопрос, а разве элементы могут включать в себя компоненты?
Может быть вопрос глупый, но я бы хотел точно знать что здесь что.
jsx
<div className="sidebar" />
, например, то Babel компилирует это все вReact.createElement('div', {className: 'sidebar'}, null)
, т.е. элементы уже не совсем элементы, а объекты js. Компонент это по сути такой же объект с кучей вложенных объектов черезchildren
. Когда мы якобы вставляем компонент в элемент, мы втавляем один объект в другой, что совершенно нормально. Реакту не нужен текстовыйhtml
ибо ему ещё нужно виртуальный дом строить и работать с ним как можно быстрее, что сложно, если постоянно парситьhtml
. reactjs.org/docs/jsx-in-depth.html – Misha Saidov 6 фев в 21:20