React：将道具从祖父母传递给孙子

Question

我在反应中传递道具时遇到问题。这是我的文件夹结构：

源码

我正在使用 Bootstrap 4 在 Button.js 中创建一个按钮：

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

class 按钮中没有其他内容。所以现在我将一个按钮放入 class PageContainer:

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

如您所见，我将标题传递给按钮：上一步和下一步。那很好用。我现在可以添加一个 url，它可以正常工作，但这不是我想要的。

我将 PageContainer 添加到 class 页面，以便我可以在此级别添加 url：

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

出于某种原因，这不起作用。有人可以向我解释如何将道具从祖父母传递给孙子女吗？在文档中它说这是如何做到这一点的方式。我也没有得到任何错误，因为 prop 没有从 Page 传递到 PageContainer。 console.log(this.props.urlBack) 结果未定义。

PS：也许你问我为什么要使用 Page.js 或者我为什么要有 PageContainer。第一：有更多的组件，我只是把它们排除在外。第二：我想为多个页面重用 PageContainer，这样我只需要更改 url.

Answer 1

您似乎没有将 props 传递给 <VideoContainer /> 组件。您只是将其分配为路由组件 <Route />

您的答案可以在这里找到：

即

<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

React: Passing Props from grandparent to grandchild