Проходные методы через реквизит

Как передавать метод компонентов класса React в компоненты детей

Чтобы добавить метод в компонент класса, мы просто создаем идентификатор внутри определения класса и назначаем функцию этому идентификатору. Обычно мы назначаем функцию стрелки идентификатору, который представляет имя метода. Вот пример. Добавляем toggleitem () Метод для Приложение Компонент класса:

class App extends React.Component {

  toggleItem = itemId => {
  }

}

Но как мы можем передать этот метод класса по цепочке компонентов? Скажем, нам нужно использовать этот метод в детском компоненте. Мы используем объект реквизита для этой цели. В этом примере у нас есть GroceryList Компонент, который является ребенком Приложение . Когда мы снимаемся GroceryList Внутри Приложение , мы также передаем ToggleItem Опора, который устанавливается на метод класса в родительском компоненте, на который ссылаются ключевое слово это :

Если нам нужно пройти toggleitem () дальше до ребенка Список покупок , мы можем ссылаться на тот же идентификатор, но в этом случае нам нужно ссылаться на него через реквизит, потому что он был передан Список покупок от Приложение через объект реквизита:

// Inside GroceryList:

{
  props.groceries.map(item => {
    return (
      
    )
  })
}

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

Оригинал: “https://dev.to/cesareferrari/passing-methods-through-props-49op”