Как передать большой список данных от родительского к дочернему компоненту

Question

Скажем, у меня есть родительский компонент, подобный этому:

class ParentComponent{
    constructor(props){
        this.state = {
            children:[{...},{...}...]
        }
     render(){
         return(
             <ChildComponentList .../>
         )
     }
    }
}

И дочерний список, подобный этому:

class ChildComponentList{
    constructor(props){
        this.state = {
            ...
        }
     render(){
         return(
             ???.children.map(
                 <ChildComponent ... />
             )
         )
     }
    }
}

Теперь я, очевидно, хочу передать дочерние элементы от родителя ксписок детей.Я знаю, что вы передаете данные от родителя ребенку с помощью реквизита.Но мне не имеет смысла говорить что-то вроде <ChildComponentList children = {this.children} />, потому что дети - это не одно значение, а огромный список.Также предположим, что это будет дерево, в котором ChildComponent может содержать больше ChildComponentList s и т. Д.

Вот варианты, которые я вижу:

• имеют некоторый видметода getChildren() в родительском и вызовите его для дочернего списка
• используйте Redux и поместите дочерние элементы в хранилище данных
• пусть каждый список дочерних компонентов извлекает свои данные из базы данных индивидуально,Мне не нужно передавать большой список по дереву
• , просто продолжайте и поместите весь список в реквизит, даже если это не имеет смысла для меня

Чтолучший способ сделать это?

Answer 1

class ParentComponent{

    constructor(props){

        super(props);

        this.state = {
            items:[{...},{...}...]
        }
     }

     render(){
         return(
             <ChildComponentList items={this.state.items} />
         )
     }
}


class ChildComponentList{
     render(){
         return(
             this.props.items.map(
                 (item, i) => <ChildComponent key={i} ... />)
         )
     }
}