Tengo la estructura de componentes (anidados) que se parece a esto:

  • Envase
    • componentes
      • Componente
        • Componente (desea manejar el evento aquí con el estado que vive en el contenedor)

¿Necesito pasar como accesorios desde Container, ComponentS, ComponentS y finalmente ComponentS para tener este controlador? ¿O hay otra forma como usar la API de contexto?

Me resulta un poco difícil manejar eventos con react.js vs vue.js / angular.js debido a esto.

1
Coastpear 15 oct. 2018 a las 18:35

2 respuestas

La mejor respuesta

Recomendaría usar API de contexto (como mencionaste) o Componentes de orden superior (HoC)

4
CRayen 15 oct. 2018 a las 15:50

Context Api es su centro de datos. Pones todos los datos y haz clic en los eventos que tu aplicación necesita aquí y luego con el método "Consumidor" los recuperas en cualquier componente sin importar cuán anidado esté. A continuación, se muestra un ejemplo básico:

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 };

Ahora configuramos nuestro centro de datos con los métodos .Consumer y .Provider para que podamos acceder aquí a través de "ProductConsumer" en nuestros componentes. Supongamos que desea mostrar todos sus productos en su página de inicio. 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;

Esta es la lógica detrás de Context Api. Suena aterrador pero si conoces la lógica es muy simple. En lugar de crear sus controladores de eventos y datos dentro de cada componente y la perforación de accesorios, que es un gran dolor de cabeza, simplemente coloque los datos y los controladores de eventos aquí y orquestéelos.

Espero que ayude.

0
Yilmaz 31 may. 2019 a las 21:57