Question

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

我的组件结构是这样的：

仪表板
- 计费
- 发票

我想要它，以便当您单击开票内的发票链接时，发票组件将呈现在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。

Answer 1

您无需为用例绘制路线。据我了解，每当您单击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>

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

1 个答案: