Я новичок в React JS, я хочу создать приложение со списком дел. У меня есть App.js, который является главной страницей, и поэтому я создал компонент MainBlock для страницы App.js, которая содержит левую и правую стороны моего макета, а в свойстве правой стороны он загружает {{X3} } компонент, который имеет input и button и сохраняет входные значения в массив в state, а в левой части он загружает List компонент, который имеет свойство с именем allTasks который печатает все задачи. Моя проблема в том, как я могу перевести состояние allTasks из компонента формы в App.js, чтобы передать его в свойство компонента List? В App.js:

<MainBlock
left={  
    <List allTasks={['خرید از فروشگاه', 'تعویض دستگیره درب منزل']} />} 
right={
    <Form />
} />
0
user6571878 25 Фев 2018 в 00:46

5 ответов

Лучший ответ

Это можно сделать, сохранив задачи в виде состояния в компоненте приложения, и попросив форму передать состояние через функцию обратного вызова. Эта концепция называется «поднятие состояния вверх». Вот руководство по этому поводу: https://reactjs.org/docs/lifting-state- up.html

<MainBlock
  left={
    <List allTasks={this.state.allTasks} />
  }
  right={ 
    <Form onSubmit={allTasks => this.setState({ allTasks })} />
  }
/>
2
kingdaro 24 Фев 2018 в 21:53

Вы пытаетесь добиться двухстороннего связывания здесь. К сожалению, React - это библиотека, которая не поддерживает двустороннее связывание по умолчанию. Вы можете передавать только значения от Родителя к Дочернему элементу. Однако обратное неверно. В этом случае вы пытаетесь загрузить реквизит из Form в App, то есть из дочернего элемента в родительский, что невозможно.

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

0
Singh 24 Фев 2018 в 21:54
  1. Пусть задачи будут состоянием компонента MainBlock. Передайте это состояние компоненту List.

  2. Пусть компонент Form предоставляет свойство обратного вызова (возможно, onTaskCreated), которое вызывается, когда пользователь завершает создание новой задачи.

  3. Позвольте MainBlock перехватывать обратные вызовы onTaskCreated и обновлять его внутреннее состояние с помощью новой задачи, что вызывает повторную визуализацию и, таким образом, передачу нового списка задач компоненту List.

1
Mårten Wikström 24 Фев 2018 в 21:53

Передача данных между компонентами может привести к путанице. Такие библиотеки, как redux, были созданы, чтобы сделать это «проще», но это можно сделать с помощью простого React. Чтобы передать информацию о состоянии детям, вы передаете ее в реквизит. Чтобы отправить данные в другом направлении, вы передаете (от родителя к потомку) функцию-обработчик, которая вызывается из потомка и может при необходимости влиять на состояние родителя (или передаваться его родителю).

Я написал образец ручки, чтобы помочь людям обдумать это. Надеюсь, это поможет.

Что-то вроде:

<Child1 handleAdd={this.handleAdd.bind(this)} 
    handleSubtract={this.handleSubtract.bind(this)} 
/>

Вызовы в родительском и и доступны в дочернем как:

<Button onClick={this.onAdd.bind(this)}>
    add
</Button>&nbsp;
<Button onClick={this.props.handleSubtract.bind(this)}>
    subtract
</Button>

Затем в родительском объекте есть функция с именем handleAdd , которая может влиять на родительское состояние.

0
Kevin 24 Фев 2018 в 22:00

Вы можете хранить все свои задачи в состоянии компонента MainBlock и передавать функции для обновления состояния по вашей форме. Также передайте состояние (задачи) MainBlock вашему компоненту List. Обновление ваших задач в MainBlock автоматически передает задачи в список. Позже вы можете использовать библиотеку управления состояниями, такую как MobX и Redux.

0
Seekerakos 24 Фев 2018 в 21:57