将React路由组件传递给父组件的props函数

时间:2019-01-27 09:06:23

标签: javascript node.js reactjs react-router react-router-dom

如果听起来很愚蠢,可以做出反应并原谅我,但是我正在努力解决。

我的组件结构是这样的:

  • 仪表板
    • 计费
    • 发票

我想要它,以便当您单击开票内的发票链接时,发票组件将呈现在Dashboard中的div中。

  • 仪表板<<<<
    • 计费____ ^
    • 发票>>>

我不知道我的方法是正确的,还是我做错了什么,或者是否完全不正确,我需要重新考虑一下我的理解。

仪表板:

<Route
    path="/dashboard/billing"
    render={() => (
        <Billing
            togglePanel={this.togglePanel}
            fillPanel={this.fillPanel}
        />
    )}
/>

BILLING:

<Route
    path="/dashboard/billing/invoice/:id"
    render={props => (
        <Invoice {...props} />
    )}
/>

Inside billing there is a list of Links as:

<Link
    onClick={event => {
        this.props.togglePanel();
    }}
    className="item"
    to={`/dashboard/billing/invoice/${d.id}`}
>
    View
</Link>

所以我们很清楚我正在使用:

从“ react-router-dom”导入{Link,Route};

在信息中心内,我有一个要填充发票部分的div。

fillPanel()函数可更改仪表板中的状态,从而将目标div的内容更改为所传递的内容(这只是我的尝试)。

我知道如何在切换等上显示和隐藏,所以这不是问题,我只想知道在单击“结算”中的项目后在呈现时如何用“发票”组件填充“仪表板”中的目标div。

1 个答案:

答案 0 :(得分:0)

您无需为用例绘制路线。据我了解,每当您单击Invoice.js中的链接(从链接列表中)时,只需在div中显示Billing.js

您可以做什么,而不是:

<Link
  onClick={event => {
    this.props.togglePanel();
  }}
  className="item"
  to={`/dashboard/billing/invoice/${d.id}`}
>
  View
</Link>

使用:

<div 
  onClick={event => {
    this.props.togglePanel();
  }}
  className="item"
> View 
</div>

并且,而不是:

<Route
  path="/dashboard/billing/invoice/:id"
  render={props => (
    <Invoice {...props} />
  )}
/>

使用:

<div className="div-where-you-want-to-show-the-invoice">
  <Invoice {...props, d.id}/>
</div>