將React路由組件傳遞給父組件的props函數

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的內容更改為所傳遞的內容（這只是我的嘗試）。

我知道如何在切換等上顯示和隱藏，所以這不是問題，我只想知道在單擊Billing中的項目后在呈現時如何用Invoice組件填充Dashboard中的目標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>