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

Question

我正在使用前端应用程序的onsen-ui样式。据我了解，管理按页面到堆栈的导航，其中每个页面都有唯一的标识符。meteorReactonsen-uipushing

这是我的页面的加载方式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-reduxconnect()

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

举个例子，假设我有一个下面定义的组件

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

export default connect()(ComponentName)

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

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

欢迎提出任何建议。

编辑：按照 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)

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

在生产模式下，我收到单个字母，page.displayName并且这些字母几乎不是唯一的，这意味着我又回到了开始的地方。

我需要找到另一种方法。我会更新我发现的一切。

Answer 1

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

您正在使用的 HOC 的名称是 Connect，并且会返回该名称。

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

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