javascript - react : Passing Props from grandparent to grandchild

Question

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

源文件

成分

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 类中没有其他内容。所以现在我将一个 Button 放入类 PageContainer 中:

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

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

我将 PageContainer 添加到类 Page 以便我可以在这个级别添加一个 url:

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

由于某种原因，这不起作用。有人可以解释我如何将 Prop 从祖 parent 传给孙子吗？在文档中它说这是如何做到的。我也没有收到错误，因为 prop 没有从 Page 传递到 PageContainer。 console.log(this.props.urlBack) 导致未定义。

PS:也许你会问我为什么要使用 Page.js 或者我为什么要使用 PageContainer。第一:有更多的组件，我只是省略了它们。第二:我想为多个页面重用 PageContainer，这样我只需要更改 url。

Answer 1

看起来您没有将 Prop 传递给您的 <VideoContainer />成分。您只是将其分配为路由组件 <Route />
您可以在此处找到答案:
React react-router-dom pass props to component

IE。

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

但是，我认为这不会让您的 this.props.url和 this.props.btnName . this.props.path ，是的..但是你可能需要重新审视那里的一些逻辑。

更新:

阅读您的评论并检查您的 repo 后，您的设置看起来没有任何问题。我在以下模拟了您的 BubblesortVideo -> VideoContainer 层次结构:
https://stackblitz.com/edit/react-eaqmua