如何在React组件中根据源文件应用不同的逻辑？

Question

我正在开发一个 React 应用程序，并且有一个场景，我需要根据调用我的组件的文件应用不同的逻辑。设置如下：

hello-world.js：

if (parsedData.extras?.length > 0) {
    openCheckoutStep('extras'); // it goes to AbcDef.tsx file or AbcDefView component
}

AbcDef.tsx（此文件中设置了路由：extras）

export const AbcDefView = () => {
    if (/* condition to check if called from hello-world.js */) {
        // Logic A should be applied
    } else if (/* condition to check if called from GhiJkl.tsx */) {
        // Logic B should be applied
    }
};

GhiJkl.tsx

if (extras.length > 0) {
    navigate('/checkout/extras');
}

如果从 hello-world.js 调用，我需要 AbcDefView 应用逻辑 A；如果从 GhiJkl.tsx 调用，我需要 AbcDefView 应用逻辑 B。如何确定 AbcDefView 中的调用来源以应用正确的逻辑？

Answer 1

没有办法告诉调用堆栈源自哪个源代码文件，但您可以将参数传递给函数来告诉它要做什么。例如，如果只有两个选项，您可以在以下位置传递一个布尔值：

export const AbcDefView = (isFromHelloWorld) => {
    if (isFromHelloWorld) {
        // Logic A should be applied
    } else {
        // Logic B should be applied
    }
};

在 helloWorld.ts 中，您可以这样称呼它：

AbcDefView(true);

在 ghijkl.tsx 中，您可以这样称呼它：

AbcDefView(false);