面试题：React中Props传递函数在复杂业务场景下的应用及设计模式

实现思路

定义操作策略接口：创建一个接口或者抽象类来定义商品操作的方法，例如添加到购物车、收藏商品等操作都遵循这个接口。
具体策略实现：针对每个具体的商品操作，实现上述接口的具体方法。
在 ProductList 组件传递策略实例：ProductList 组件负责创建具体策略的实例，并通过 props 将其传递给 ProductItem 组件。
在 ProductItem 组件调用策略方法：ProductItem 组件接收传递过来的策略实例，并在合适的时机调用其方法。

核心代码示例（以 React 为例）

定义操作策略接口

// 定义商品操作策略接口
interface ProductOperationStrategy {
  performOperation(product: any): void;
}

具体策略实现 - 添加到购物车

// 添加到购物车策略实现
class AddToCartStrategy implements ProductOperationStrategy {
  performOperation(product: any) {
    // 实际添加到购物车的逻辑，例如调用 API 等
    console.log(`Added product ${product.name} to cart`);
  }
}

ProductList 组件

import React from 'react';
import ProductItem from './ProductItem';

// 模拟商品数据
const products = [
  { id: 1, name: 'Product 1' },
  { id: 2, name: 'Product 2' }
];

const ProductList: React.FC = () => {
  const addToCartStrategy = new AddToCartStrategy();

  return (
    <div>
      {products.map(product => (
        <ProductItem key={product.id} product={product} operationStrategy={addToCartStrategy} />
      ))}
    </div>
  );
};

export default ProductList;

ProductItem 组件

import React from 'react';
import { ProductOperationStrategy } from './ProductOperationStrategy';

interface ProductItemProps {
  product: any;
  operationStrategy: ProductOperationStrategy;
}

const ProductItem: React.FC<ProductItemProps> = ({ product, operationStrategy }) => {
  const handleClick = () => {
    operationStrategy.performOperation(product);
  };

  return (
    <div>
      <p>{product.name}</p>
      <button onClick={handleClick}>Add to Cart</button>
    </div>
  );
};

export default ProductItem;

上述代码展示了如何使用策略模式在电商应用的商品列表组件和商品项组件间传递并组织商品操作逻辑。在实际应用中，performOperation 方法内可能会涉及更复杂的业务逻辑，如 API 调用等。同时，若需要添加新的商品操作逻辑，只需创建新的策略类并实现 ProductOperationStrategy 接口即可。

面试题：React中Props传递函数在复杂业务场景下的应用及设计模式

知识考点

面试题答案

实现思路

核心代码示例（以 React 为例）