React.js - как передать обработчики событий глубоко вложенному компоненту без сверления реквизита?

Question

У меня есть структура компонентов (вложенных), которая выглядит следующим образом:

• Контейнер
  • Компонент A
    • Компонент B
      • ComponentC (хотитеобрабатывать событие здесь с состоянием, которое живет в контейнере)

Нужно ли проходить как реквизиты весь путь от Контейнера, ComponentA, ComponentB и, наконец, ComponentC, чтобы иметь этот обработчик?Или есть другой способ, например, использование Context API?

Из-за этого мне сложно обрабатывать события с помощью response.js против vue.js / angular.js.

Answer 1

Контекст Api - это ваш дата-центр.Здесь вы помещаете все данные и события щелчков, которые нужны вашему приложению, и затем с помощью метода «Потребитель» извлекаете их в любой компонент независимо от его вложенности.Вот базовый пример:

context.js //in your src folder.

import React, { Component, createContext } from "react";
import { storeProducts } from "./data"; //imported the data from data.js
const ProductContext = createContext(); //created context object
class ProductProvider extends Component {
  state = {
    products: storeProducts,
    };
render() {
    return (
      <ProductContext.Provider
//we pass the data via value prop. anything here is accessible
        value={{
          ...this.state,
          addToCart: this.addToCart //I wont use this in the example because it would 
 be very long code, I wanna show you that, we pass data and event handlers here!
        }}
      >
  // allows all the components access the data provided here
        {this.props.children},
      </ProductContext.Provider>
    );
  }
}
const ProductConsumer = ProductContext.Consumer;
export { ProductProvider, ProductConsumer };

Теперь мы настроили наш центр обработки данных с помощью методов .Consumer и .Provider, чтобы получить доступ к ним через «ProductConsumer» в наших компонентах.Допустим, вы хотите отобразить все свои продукты на домашней странице.ProductList.js

import React, { Component } from "react";
import Product from "./Product";
import { ProductConsumer } from "../context";

class ProductList extends Component {
  render() {
    return (
<React.Fragment>
          <div className="container">
            <div className="row">
              <ProductConsumer>
       //we fetch data here, pass the value as an argument of the function
                {value => {
                  return value.products.map(product => {
                    return <Product key={product.id}  />;
                  });
                }}
              </ProductConsumer>
            </div>
          </div>
      </React.Fragment>
    );
  }
}
export default ProductList;

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

Надеюсь, это поможет.

Answer 2

Я бы рекомендовал использовать либо Context API (как вы упомянули), либо Компоненты высшего порядка (HoC)