React：将道具从祖父母传给孙子孙女答案

【问题标题】：React: Passing Props from grandparent to grandchildReact：将道具从祖父母传给孙子孙女
【发布时间】：2018-09-04 16:46:30
【问题描述】：

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

src

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

  <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。

【问题讨论】：

似乎没什么特别的。你能提供组件的完整代码吗？顺便说一句，它是非 SPA 应用程序吗？
究竟是什么不工作？请完整代码
github.com/yannistr0m/lms/tree/master/lms-app/src 我无法将 URL 从 Page 传递到 PageContainer 到 Button。在原始情况下，它是从：BubblesortVideo 到 VideoContainer 到 Button

【解决方案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

【讨论】：