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

我正在使用onsen用户界面设计一个meteor应用程序，前端使用React。据我所知，onsen ui通过将页面推送到堆栈来管理导航，每个页面都有一个唯一的标识符

下面是如何在App.js中加载我的页面

到目前为止一切正常。但是我现在已经在我的项目中包括了redux，所以我有一些组件通过react redux的connect函数连接到商店

问题是，对于每个连接包装的组件，name属性都变成connect，因此onsenui必须处理其堆栈中具有相同名称的多个页面

例如，假设我有一个定义如下的组件

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

export default connect()(ComponentName)

因此，对于每个组件，我只得到带有getPageKeyComponentName的键

编辑2。这种方法在生产中不起作用。 在生产模式下，page.displayName只有一个字母，这些字母几乎不唯一，这意味着我回到了开始的位置

---

我需要找到另一种方法。我会更新我找到的任何东西。

之所以会发生这种情况，是因为您正在通过一个更高阶的函数Connect导出组件，这在JavaScript中基本上是一个闭包

您正在使用的HOC的名称为Connect，并返回该名称

但是，可以将组件的名称传递到connect HOC中

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

---

之所以会发生这种情况，是因为您正在通过一个高阶函数Connect导出组件，这在JavaScript中基本上是一个闭包

您正在使用的HOC的名称为Connect，并返回该名称

但是，可以将组件的名称传递到connect HOC中

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

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

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

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

然后希望您能够访问唯一的ConnectedComponentName

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

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

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

---

然后，希望您能够访问唯一的ConnectedComponentName

如果您编辑原始帖子并将更新添加到问题下方，那将是最好的，这样它将更加可见和可读。我做得很好！我希望它能帮助其他人解决类似的问题。如果你编辑原始帖子，并在问题下方添加你的更新，那将是最好的，这样它会更可见和可读。我做得很好！我希望它能帮助其他有类似问题的人。这行不通。导出后，名称更改为ConnectThis将不起作用。导出后，名称将更改为“连接”