反應：將道具從祖父母傳遞給孫子

Question

我在傳遞道具時遇到問題。 這是我的文件夾結構：

src

• 零件

  • Button.js

• 容器

  • PageContainer.js

• 頁

  • Page.js

我正在使用Bootstrap 4在Button.js中創建一個Button：

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

Button類中沒有其他內容。 所以現在我將一個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。

Answer 1

您似乎沒有將道具傳遞到<VideoContainer />組件。 您只是將其分配為路由組件<Route />

您的答案可以在這里找到： 對組件的React react-router-dom傳遞道具

即

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

但是，我認為這不會獲得您的this.props.url和this.props.btnName 。 this.props.path ，是的this.props.path但是您可能必須在此重新訪問一些邏輯。

更新：

閱讀您的評論並檢查您的回購后，看來您的設置沒有任何問題。 我在以下位置模擬了您的BubblesortVideo-> VideoContainer層次結構： https ://stackblitz.com/edit/react-eaqmua