如何修改反应冗余连接函数的默认名称?

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

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

欢迎提出任何建议。

编辑：在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 的名称是"连接"，并返回此名称。

但是，可以获取传递到连接 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