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

Question

我正在使用 onsen-ui 为前端设置 meteor 应用程序的样式。据我了解，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 包装的每个组件，名称属性变为 Connect，因此 onsen-ui 必须处理具有相同名称的多个页面堆栈中的名称。

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

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

export default connect()(ComponentName)

通常，ComponentName.name returns ComponentName 但一旦用 connect 包裹起来， ComponentName.name returns 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

Answer 2

我不熟悉 onsen-ui，看起来 Vlatko 已经介绍过了，但是你不能给新连接的组件起个名字吗？例如：

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

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

那么希望您能够访问独一无二的 ConnectedComponentName

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

How do I modify the default name of react-redux connect function?

javascript

meteor

reactjs

onsen-ui

react-redux

编辑：在 Vlatko 的指导下，这就是我最终解决问题的方法。

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