Как я могу передавать аргументы в действии для разных трехуровневых компонентов реакции без избыточного и контекстного API?

Предположим, у меня есть 3 компонента в реагирующем приложении. Компонент App, компонент Items и компонент Item.

Мое состояние находится в компоненте приложения. Теперь я хочу удалить элемент из состояния через id. Функция onClick находится в компоненте Item. Идентификатор из компонента Item переходит от компонента Items к компоненту App.

Я попробовал это, используя метод .bind, и мне удалось передать 2 элемента данных в элементы.


reactjs react-state react-component react-state-management
person Ebrahim Khalil Amid    schedule 12.07.2019    source источник
comment
Укажите несколько кодов, которые вы пробовали, включая компоненты App, Items, Item.   -  person Diamond    schedule 12.07.2019
comment
Вот фраза, о которой следует помнить при работе с React: Данные вниз, Действия вверх   -  person Mark C.    schedule 12.07.2019
comment
Вам не нужен контекст для этого. Если state живет в <App />, то определите свой deleteItem(item) в <App />, который обновит ваше состояние. Пропустите deleteItem вниз к <Item onClick={this.props.deleteItem}/>   -  person lux    schedule 12.07.2019

Ответы (2)


arrow_upward
1
arrow_downward

Для этого вам не нужен редукс. Контекст хорош, но и не обязателен. Я предпочитаю контекст. Но можно обойтись и без них следующим образом:

// App.js
class App extends Component {
  state = { items: ...etc };

  handleItemClick = (id) => whatever

  render() {
    return <Items items={this.state.items} onItemClick={this.handleItemClick} />
  }
}

// Items.js
class Items extends Component {
  render() {
    return this.props.items(item => <Item key={item.id} id={item.id} onClick={this.props.onItemClick} />);
  }
}

// Item.js
class Item extends Component {
  handleClick = () => {
    this.props.onClick(this.props.id);
  }

  render() {
    return <whatever onClick={this.handleClick} />
  }
}
person João Cunha    schedule 12.07.2019

arrow_upward
0
arrow_downward

Вы можете сделать следующее: передать функцию onClick в качестве реквизита из компонента «Приложение» в компонент «Элемент», таким образом, у вас есть доступ к состоянию в компоненте приложения, и вы передаете ему параметр id из компонента который использует функцию.

Вообще говоря, я думаю, что компонент Items должен содержать состояние, а также функциональность, а не компонент App или компонент Item, который является просто компонентом пользовательского интерфейса (компонент без состояния). Таким образом, всякий раз, когда вы удаляете элемент, компонент Items будет повторно отображать себя из-за изменения состояния.

person Tomer    schedule 12.07.2019
comment
спасибо, @Tomer. Но My Item оборачивает компонент Items и получает данные из реквизита из того же компонента. Так что, возможно, это невозможно. Во-вторых, я знаю, что должен хранить свое состояние в Items. Я даже мог бы использовать контекстный API. Но я учусь отправлять функции в качестве реквизита и получать аргументы более чем на двух уровнях компонента. - person Ebrahim Khalil Amid; 12.07.2019