Реакция: передача реквизита от бабушки и дедушки к внуку

У меня проблема с передачей реквизита в реакции. Это моя структура папок:

источник

  • Составная часть

    • Button.js

  • Контейнер

    • PageContainer.js

  • Страница

    • Page.js

Я использую Bootstrap 4 для создания кнопки в Button.js:

  <div>
    <a className="btn btn-primary sharp" href={this.props.url} role="button">{this.props.btnName}</a>
  </div>

Ничего другого в классе Button нет. Итак, теперь я помещаю кнопку в класс PageContainer:

 <div>
    <Header/>
    <Button url={this.props.urlBack} btnName="Back"/>
    <Button url={this.props.urlNext} btnName="Next"/>
  </div>

Как видите, я передал название кнопкам: Назад и Далее. Это прекрасно работает. Теперь я могу добавить URL-адрес, и он будет работать нормально, но это не то, что мне нужно.

Я добавил PageContainer в класс Page, чтобы добавить URL-адрес на этом уровне:

  <div>
    <PageContainer urlBack="/" urlNext="/nextPage"/>
  </div>

По какой-то причине это не работает. Может кто-нибудь объяснить мне, как я могу передать реквизит от бабушки и дедушки к внуку? В документации написано, что так и должно быть. Я также не получаю никаких ошибок, потому что реквизит не передается из Page в PageContainer. console.log(this.props.urlBack) приводит к неопределенности.

PS: Может быть, вы спрашиваете, почему я использую Page.js или по какой причине у меня есть PageContainer. Во-первых: компонентов гораздо больше, я их просто не упомянул. Во-вторых: я хочу повторно использовать PageContainer для нескольких страниц, поэтому мне просто нужно изменить URL-адрес.


reactjs javascript bootstrap-4 prop
person yannistrom    schedule 26.03.2018    source источник
comment
Вроде ничего особенного. Можете ли вы предоставить полный код компонентов? Кстати, это не SPA-приложение?   -  person Denys Kotsur    schedule 26.03.2018
comment
Что именно не работает? Полный код пожалуйста   -  person Galupuf    schedule 26.03.2018
comment
github.com/yannistr0m/lms/tree/master/lms-app/ src Я не могу передать URL-адрес из Page в PageContainer в Button. В исходном случае это от: BubblesortVideo до VideoContainer до Button   -  person yannistrom    schedule 26.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Не похоже, что вы передаете реквизиты своему компоненту <VideoContainer />. Вы просто назначаете его как маршрутизируемый компонент <Route />

Ваш ответ можно найти здесь: React react-router-dom передает реквизиты на компонент

i.e.

<Route path="/algorithmus/bubblesort/video" 
    render={(props) => <VideoContainer {...props} />}
/>

Однако я не думаю, что это принесет вам ваши this.props.url и this.props.btnName. this.props.path, да ..но, возможно, вам придется вернуться к некоторой логике.

ОБНОВЛЕНИЕ:

После прочтения вашего комментария и проверки вашего репо не похоже, что с вашей настройкой что-то не так. Я эмулировал вашу иерархию BubblesortVideo -> VideoContainer по следующему адресу: https://stackblitz.com/edit/react-eaqmua

person Napoli    schedule 26.03.2018
comment
О, спасибо большое с намеком на маршрутизацию. Я забыл изменить маршрутизацию с VideoContainer на BubblesortVideo. Усвоенный урок: всегда проверяйте маршрутизацию. - person yannistrom; 27.03.2018