Javascript 用高阶组件装饰导入的React组件

我知道如何在导出组件之前对其进行装饰，如下所示：

export default ButtonDecorator(MainButton)

但如果我试图制作一个索引来导入它，并在某些情况下对其进行不同的修饰。这行不通

以下是索引的示例：

import MainButton from './main/main_button'
import BackButton from './back/back_button'

import { ButtonDecorator, LinkDecorator } from 'decorators'

export {
    ButtonDecorator(MainButton) as MainButton,
    LinkDecorator(MainButton) as MainHrefButton,
    BackButton
}

以及高阶分量：

import React, { Component } from 'react'

let Btn = InnerComponent => {
    class NewBtn extends Component {

        constructor(props) {
            super(props)
        }

        render() {
                return (
                    <button onClick={this.props.onClick}>
                        <InnerComponent disabled={this.props.disabled} />
                    </button>
                )
        }
    }

    return NewBtn
}

export default Btn

import React，{Component}来自“React”
设Btn=InnerComponent=>{
类扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}
返回新站点
}
导出默认Btn

正确的方法是什么？

据我所知，需要一个名称（变量），而不是函数调用。试试这个：

const ButtonDecoratedMainButton = ButtonDecorator(MainButton);
const LinkDecoratedMainButton = LinkDecorator(MainButton);

export {
    DecoratedMainButton as MainButton,
    LinkDecoratedMainButton as MainHrefButton,
    BackButton
}

据我所知，它需要一个名称（变量），而不是函数调用。试试这个：

const ButtonDecoratedMainButton = ButtonDecorator(MainButton);
const LinkDecoratedMainButton = LinkDecorator(MainButton);

export {
    DecoratedMainButton as MainButton,
    LinkDecoratedMainButton as MainHrefButton,
    BackButton
}