У меня есть компонент, скажем, List Component. Компонент List может отображать элементы через компонент ListItem. Который может быть легко достигнут с чем-то вроде ниже
import React from 'react';
import ListItem from '../list-item/list-item';
class List extends React.Component {
renderListItems() {
return this.props.items.map(item => <ListItem item={item} />)
}
render(){
return (
<div className="list">{this.renderListItems()}</div>
)
}
}
а также
import React from 'react';
class ListItem extends React.Component {
render(){
return (
<div className="list-item">Name: {this.props.item.name}</div>
)
}
}
Теперь, в этом случае, если элементы списка могут иметь родительские дочерние элементы внутри них, то один элемент списка может дополнительно отобразить больше элементов списка, как я могу визуализировать компонент ListItem из самого себя. Ниже приводится дерево рендеринга, которое я ищу, а также состояние моих данных
List
- ListItem
- ListItem
- ListItem
- ListItem
- ListItem
редактировать
Я думаю, что правильная структура будет чем-то вроде этого
List
- ListItem
- List
- ListItem
- ListItem
- ListItem
- ListItem
Но это, конечно же, создаст круговую зависимость между компонентами List и ListItem, будет ли это проблемой?