Блог

Главная - Вопросы по программированию - Передача реквизитов дочернему элементу внутри родительского конструктора

Передача реквизитов дочернему элементу внутри родительского конструктора

#javascript #reactjs

Вопрос:

Я пытаюсь передать состояние родителя в реквизит внука. Дело в том, что я создаю компонент внука в переменной конструктора/состояния ребенка, и он, похоже, не хочет передавать реквизиты вниз. Ребенок успешно получает объект props results , но у внука есть пустой объект, когда я ссылаюсь this.props.results . Как я могу отправить реквизит внуку?

Родительский компонент

 render()
{

    return( <ChildComponent results={this.state.results}/> );

}

Дочерний компонент

 constructor(props) {
    super(props);

    this.state = {

      containerContent: [
        <GrandChildComponent results={props.results}/>, //this.props.results also does not work
      ]

    }
  }

render()
{

<main>

   {this.state.containerContent[0]}

</main>

}

Компонент Внука

 render()
{

    <h3>{this.props.results.someValue}</h3> //Throws an error, saying `results` is empty.

}

Комментарии:

1. Учтите тот факт, что конструктор будет запущен только один раз. Также можете ли вы показать свою функцию рендеринга для дочернего компонента

2. Конечно-я добавил свой метод визуализации для ребенка (упрощенная версия). В принципе, у меня есть массив из 6 различных «представлений», которые я визуализирую в зависимости от состояния ребенка. В этом случае я жестко запрограммировал его как представление 0, так как в массиве есть только один элемент containerContent .

3. Ваш реквизит, полученный от родителей, меняется со временем? Является ли объект результатов пустым в какой-то момент, а затем заполняется позже?

4. Да, вы правы… Они правы. Итак, я предполагаю, что конструктор вызывается только один раз, как вы упомянули, а не один раз каждый раз, когда он визуализируется? Мне придется придумать другое решение, чтобы отобразить свои взгляды.

5. Разве вы не можете поместить их внутрь рендеринга? Это будет вызвано после изменения реквизита

Ответ №1:

Вы можете использовать контекстный api или использовать redux. что более удобно.

Метки: