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

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

Моя структура компонентов такая:

  • Dashboard
    • Billing
    • Счет

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

  • Dashboard <<<<
    • Billing ____^
    • Счет-фактура >>>

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

ЩИТОК ПРИБОРОВ:

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

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

импортировать {Link, Route} из "response-router-dom";

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

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

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


reactjs node.js javascript react-router-dom react-router
person Tom    schedule 27.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам не нужно отображать маршрут для вашего варианта использования. Насколько я понимаю, вам просто нужно показывать 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>
person Kapil Sharma    schedule 27.01.2019
comment
Это действительно работает, и спасибо за это, НО я хочу, чтобы пользователь мог копировать ссылку на конкретный счет, поэтому я использую маршруты. Очевидно, я могу протолкнуть маршрут с историей, но когда пользователь обращается к URL-адресу, как я могу его открыть? - person Tom; 28.01.2019
comment
В этом случае: 1: вызовите тот же компонент в маршруте счета-фактуры. 2: в методе жизненного цикла componentDidMount прочтите параметры маршрута. 3: используйте параметры маршрута, чтобы получить / открыть счет в div-where-you-want-to-show-the-invoice - person Kapil Sharma; 29.01.2019