反应：祖父母向孙辈传递道具

Question

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

src

>

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

“类”按钮中没有其他内容。现在我在类PageContainer中添加了一个按钮：

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

如你所见，我给按钮传递了一个标题：后退和下一步。那工作正常。我现在可以添加一个网址，它会工作正常，但这不是我想要的。

我将PageContainer添加到类Page中，这样我就可以在这个级别上添加一个url：

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

出于某种原因，这不起作用。有人能解释一下我如何把道具从祖父母传给孙子吗？在留档说，这是如何做到这一点的方式。我也没有得到任何错误，因为道具没有从Page传递到PageContainer。console.log（this.props.url返回）导致未定义。

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

Answer 1

看起来您并不是在向

您的答案可以在这里找到：React路由器dom传递道具到组件

即

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

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

更新：

在阅读了你的评论并检查了你的回购后，你的设置看起来没有什么问题。我已经模仿了你的泡泡视频-