javascript - 如何修改react-redux connect 函数的默认名称？

Question

我正在使用 onsen-ui 为前端使用 React 的 meteor 应用程序设置样式。据我了解，onsen-ui 通过将 页面推送到堆栈来管理导航，其中每个页面都有一个唯一标识符。

这是我的页面在 App.js 中加载的方式

loadPage = (page) => {
    const currentPage = this.navigator.pages.slice(-1)[0]

    if(currentPage.key != page.name){
        this.navigator.pushPage(
            {
                component: page,
                props: { key: page.name }
            },
            {
                animation: 'fade',
                animationOptions: {duration: 0.3, timing: 'ease-in'}
            },
        );
    }
}

目前一切正常。但是我现在在我的项目中包含了 redux，所以我有一些组件通过 react-redux 的 connect() 连接到商店> 功能。

问题在于，对于 connect 包装的每个组件，name 属性变为 Connect，因此 onsen-ui 必须处理其堆栈中具有相同名称的多个页面。

举个例子，假设我在下面定义了一个组件

const ComponentName = props => {
    return (
        <p>Test component</p>
    )
}

export default connect()(ComponentName)

通常，ComponentName.name 返回 ComponentName 但一旦用 connect 包裹，ComponentName.name 返回 连接

是否可以修改包装组件的名称值？

欢迎提出建议。

编辑:在 Vlatko 的带领下，这就是我最终解决问题的方式。

export const getPageKey = (page) => {
    // returns a page key
    let key;
    if (page.name === 'Connect') {
        key = page.displayName
        // key = page.WrappedComponent.name
        // react-redux connect returns a name Connect
        // .displayName returns a name of form Connect(ComponentName)
        return key.replace('(', '').replace(')', '')
    }
    else {
        key = page.name
        return key
    }
}

因此对于每个组件，我只需使用 getPageKey(ComponentName) 获取 key

编辑 2。这种方法在生产中不起作用。

在生产模式下，我得到了 page.displayName 的单个字母，这些字母几乎不是唯一的，这意味着我回到了起点。

我需要找到另一种方法。我会更新我发现的任何内容。

Answer 1

发生这种情况是因为您正在通过高阶函数 (Connect) 导出组件，它基本上是 JavaScript 中的闭包。

您正在使用的 HOC 的名称是 Connect，并返回此值。

但是，可以获取传递到连接 HOC 中的组件的名称。

ComponentName.name // Connect
ComponentName.displayName // Connect(ComponentName)
ComponentName.WrappedComponent.name // ComponentName