Question

我的组件结构（嵌套）看起来像这样：

容器
- ComponentA
  - ComponentB
    - ComponentC（想要在此处处理状态为存在于容器中的事件）

我是否需要从Container，ComponentA，ComponentB以及最终ComponentC一直传递为道具以拥有此处理程序？还是有使用Context API的另一种方式？

正因为如此，我发现使用react.js和vue.js / angular.js处理事件有点困难。

Answer 1

我建议您使用Context API（如您所述）或Higher Order Components (HoC)

Answer 2

上下文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背后的逻辑。这听起来很吓人，但是如果您知道逻辑，它就非常简单。与其在每个组件内部创建数据和事件处理程序并进行钻探（这是一件令人头疼的事情），不如将数据和事件处理程序放在此处并进行编排。

希望对您有帮助。

React.js-如何在不钻取道具的情况下将事件处理程序传递给深层嵌套的组件？

2 个答案: