时间戳

首页 > 解决方案 > 将 React 路由组件传递给父组件 props 函数

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

问题描述

如果这听起来很愚蠢，非常新的反应并原谅我，但我正在努力解决它。

我的组件结构是这样的：

我想要它，以便当您单击计费内的发票链接时，发票组件会呈现在仪表板中的 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”导入{链接，路由}；

在仪表板内部，我有一个要填充发票组件的 div。

fillPanel() 函数改变了 Dashboard 中的状态，从而将目标 div 的内容更改为传递的任何内容（这只是我的尝试）。

我知道如何在切换等上显示和隐藏，所以这不是问题，我只是想知道在单击 Billing 中的项目后渲染时如何用 Invoice 组件填充 Dashboard 中的目标 div。

标签： javascriptnode.jsreactjsreact-routerreact-router-dom

解决方案

您不需要为您的用例呈现路线。据我所知Invoice.js，只要您单击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>

推荐阅读