Передать компонент маршрута React функции поддержки родительского компонента - PullRequest
Новая
       6

Передать компонент маршрута React функции поддержки родительского компонента

0 голосов
/ 27 января 2019

чрезвычайно новый, чтобы реагировать и простить меня, если это звучит глупо, но я пытаюсь решить это.

Моя структура компонентов выглядит следующим образом:

  • Приборная панель
    • Billing
    • Счет

Я хочу, чтобы при нажатии на ссылку счета-фактуры внутри биллинга компонент «Счет-фактура» отображался внутри элемента div, который находится в Dashboard.

  • Панель инструментов
    • Биллинг ____ ^
    • Счет >>>

Я не знаю, правильный ли мой подход, и я что-то не так понял, или он полностью не верен, и мне нужно переосмыслить свое понимание.

DASHBOARD: 

<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>

Итак, ясно, что я использую:

import {Link, Route} из "act-router-dom ";

Внутри панели инструментов у меня есть div, который я хочу заполнить компонентом счета-фактуры.

Функция fillPanel () изменяет состояние в Dashboard, которое, в свою очередь, изменяет содержимое целевого div на то, что передано (это только моя попытка).

Я знаю, как отображать и прятать при переключении и т. Д., Так что это не проблема, я просто хочу знать, как заполнить целевой div в Dashboard компонентом Invoice, когда он отображается после нажатия элемента в Billing.

1 Ответ

0 голосов
/ 27 января 2019

Вам не нужно отображать маршрут для вашего варианта использования.Насколько я понимаю, вам просто нужно показывать 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>
...