как поднять состояние от дочернего компонента к родительскому компоненту

Question

У меня есть компонент родительского класса (Dashboard.jsx), в этом компоненте я вызываю свой дочерний компонент (AddExpense.jsx).

<ListGroup.Item>
  <Link to="/expenses/add-expense">Add expense</Link>
</ListGroup.Item>

  ...
  ...

<Card.Header id="content-header">Content</Card.Header>
<Card.Body>
  <Switch>
    <Route path="/expenses/add-expense" component={AddExpense} />
  </Switch>
</Card.Body>

Я хочу получить заголовок AddExpense из ExpenseController (laravel)и когда я нажимаю на ссылку «/ances / add-расход», «Содержимое» (заголовок на панели инструментов) меняется на заголовок, полученный из контроллера расходов.

Answer 1

«Данные вниз, действия вверх».

Вы должны передать обратный вызов в реквизиты компонента AddExpense.

<AddExpense onUpdateHeader={
  (newHeader) => {
    this.setState({contentHeader: newHeader});
  }
}>

внутри AddExpense, вам нужно вызвать этот обратный вызов при упомянутом щелчке с правильным аргументом (что бы вы ни хотелиотправить до родительского компонента).

<Link href="/expenses/add-expense" 
  onClick={ () => { 
      this.props.onUpdateHeader(headerToSendUp);
    } 
  }
>Link text...</Link>

Answer 2

@ sEver предлагает самое простое решение для того, что вы описываете. Если вы хотите создать немного более сложный веб-сайт (или если вы хотите, чтобы на всех компонентах была актуальная информация без необходимости детального изучения информации в React), вы можете обратиться кболее старые Flux или более новые Redux библиотеки. Я использовал только Flux, поэтому я буду говорить только о том, как работает Flux.

У вас есть «хранилища», которые существуют вне ваших компонентов. Эти хранилища содержат состояние, и обычно имеет смысл отслеживать состояние, используя номер идентификатора. Например, если вы хотите сохранить объект

{name: 'foo', text:'bar',value:'baz'}

, вы должны хранить его под идентификатором в ваших магазинах.

state = {'1' : {name: 'foo', text:'bar',value:'baz',id:'1'}}

У вас может быть столько хранилищ, сколько вам нужно, чтобы поддерживать чистоту потока, но ваши хранилища должны отправлять свои данные в тот же компонент, который затем будет передавать данные хранилищ через ваши дочерние компоненты какprops.

Это особенно полезно, если вам нужно изменить данные в одном компоненте, а затем отправить их параллельному компоненту или компоненту на несколько уровней выше. Это не единственное решение, и если вы пытаетесь отправить информацию только на один уровень, функция обратного вызова, вероятно, является лучшим решением.