gpt4 book ai didi

javascript - react : Passing Props from grandparent to grandchild

转载 作者:行者123 更新时间:2023-12-04 13:45:21 25 4
gpt4 key购买 nike

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

    最佳答案

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

    IE。

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

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

    更新:

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

    关于javascript - react : Passing Props from grandparent to grandchild,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49493173/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com