反应：将道具从祖父母传给孙子

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放到了PageContainer类中：

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

正如您所看到的，我将标题传递给了按钮：Back和Next。这很好。我现在可以添加一个网址，它可以正常工作，但这不是我想要的。

我将PageContainer添加到类Page，以便我可以在此级别添加URL：

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

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

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

Answer 1

看起来您不会将道具传递给<VideoContainer />组件。您只是将其指定为路由组件<Route />

你的答案可以在这里找到： React react-router-dom pass props to component

即

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

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

<强>更新

在阅读您的评论并检查您的回购后，您的设置似乎没有任何问题。我已经模仿了你的BubblesortVideo - ＆gt; VideoContainer层次结构如下： https://stackblitz.com/edit/react-eaqmua