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

Question

我正在使用onsen-ui为meteor设计一个React应用程序作为前端。据我了解，onsen-ui管理pushing页面导航到堆栈，其中每个页面都有一个唯一的标识符。

以下是我在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返回Connect

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

欢迎提出任何建议。

Edit: Following Vlatko's lead, this is how I eventually solved the problem.

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)获取密钥

Edit 2. This approach doesn't work in production.

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

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

Answer 1

发生这种情况是因为您通过更高阶函数（Connect）导出组件，这基本上是JavaScript中的闭包。

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

但是，可以获取传递给connect HOC的组件的名称。

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

Answer 2

我不熟悉onsen-ui，它看起来像Vlatko你已经覆盖，但你不能也给新的连接组件一个名字？例如：

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

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

希望你能够访问独特的ConnectedComponentName