如何在React组件中根据调用源文件执行不同逻辑？

直接判断调用组件的源文件不是可靠的做法——打包编译后源文件信息会被混淆或丢失，而且会让组件耦合性过高，后续维护成本大。更合理的方式是在跳转/调用时传递明确的标识参数，在AbcDefView中根据参数执行对应逻辑。

方法1：路由Query参数传递（适合路由跳转场景） #

修改调用方代码 #

• hello-world.js：假设openCheckoutStep内部是路由跳转，修改为携带query参数：

if (parsedData.extras?.length > 0) {
    // 若openCheckoutStep封装了navigate，内部需传递query参数
    openCheckoutStep('extras', { query: { from: 'hello-world' } });
    // 如果直接调用navigate：
    // navigate('/checkout/extras?from=hello-world');
}

• GhiJkl.tsx：跳转路由时添加query参数：

if (extras.length > 0) {
    navigate('/checkout/extras?from=ghi-jkl');
}

在AbcDefView中获取参数并判断 #

import { useLocation } from 'react-router-dom';

export const AbcDefView = () => {
    const location = useLocation();
    const searchParams = new URLSearchParams(location.search);
    const fromSource = searchParams.get('from');

    if (fromSource === 'hello-world') {
        // 执行逻辑A
    } else if (fromSource === 'ghi-jkl') {
        // 执行逻辑B
    }
};

方法2：路由State参数传递（适合需要隐藏参数的场景） #

如果不想让参数出现在URL中，可以用路由的state传递：

修改调用方代码 #

• hello-world.js：

if (parsedData.extras?.length > 0) {
    openCheckoutStep('extras', { state: { from: 'hello-world' } });
    // 直接调用navigate的话：
    // navigate('/checkout/extras', { state: { from: 'hello-world' } });
}

• GhiJkl.tsx：

if (extras.length > 0) {
    navigate('/checkout/extras', { state: { from: 'ghi-jkl' } });
}

在AbcDefView中获取state参数 #

import { useLocation } from 'react-router-dom';

export const AbcDefView = () => {
    const location = useLocation();
    const fromSource = location.state?.from;

    if (fromSource === 'hello-world') {
        // 执行逻辑A
    } else if (fromSource === 'ghi-jkl') {
        // 执行逻辑B
    }
};

方法3：组件Props传递（适合直接渲染组件的场景） #

如果openCheckoutStep是直接渲染AbcDefView而非路由跳转，直接通过props传递标识：

hello-world.js中调用组件 #

import { AbcDefView } from './AbcDef';

if (parsedData.extras?.length > 0) {
    // 直接渲染组件时传递from props
    render(<AbcDefView from="hello-world" />);
}

在AbcDefView中接收props #

type AbcDefViewProps = {
    from?: string;
};

export const AbcDefView = ({ from }: AbcDefViewProps) => {
    if (from === 'hello-world') {
        // 执行逻辑A
    } else if (from === 'ghi-jkl') {
        // 执行逻辑B
    }
};

内容的提问来源于stack exchange，提问作者flash