javascript - React ES6，如何将装饰器保存在单独的文件中

Question

我们在 ReactApp 中创建了很多装饰器。

现在我们必须在每个文件中编写装饰器，我的典型代码如下所示。

******** MyComponent.js *************

import {Decorators} from 'decoratorLib';
import React, {Component} from 'react';

const {ModuleLoader, ModuleConfig, log} = Decorators;

@ModuleLoader({
    config: {
        k1: 'Value 1',
        k2: 'Value 2',
        viewClass: ModuleViewClass,
        ...moduleConfig
    },

    propTypes: {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        address: PropTypes.string,
        quantity: PropTypes.number
    }
})

@ModuleConfig({
    config: {
        k1: 'Value 1',
        k2: 'Value 2',
        viewClass: ModuleViewClass,
        ...moduleConfig
    }
})

@log({
    config: {
        warning: true,
        error: true,
        breakOnError:false
    }
})
class MyComponent extends Component {

}

我想知道如何，我们可以在单独的文件中编写这些装饰器，然后编写一些桥来传递/连接类

就像我可以有一个 decorators.js 文件一样，在这里编写所有装饰器，然后编写一些方法或注入(inject)器将它们注入(inject)到类中。

Answer 1

装饰器实际上是一个函数

@decorator1(args)
@decorator2(args)
class Decorated {}

只是函数组合和应用

Decorated = decorator1(args)(decorator2(args)(Decorated))

所以你可以预先编写所有的装饰器

// decorators.js
const compose = (fns...) => init => fns.reduceRight((res, fn) => fn(res), init)

export default compose(
    ModuleLoader({
        config: {
            k1: 'Value 1',
            k2: 'Value 2',
            viewClass: ModuleViewClass,
            ...moduleConfig
        },

        propTypes: {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            address: PropTypes.string,
            quantity: PropTypes.number
        }
    }),
    ModuleConfig({
        config: {
            k1: 'Value 1',
            k2: 'Value 2',
            viewClass: ModuleViewClass,
            ...moduleConfig
        }
    }),
    log({
        config: {
            warning: true,
            error: true,
            breakOnError: false
        }
    })
)

然后就

import decorate from './decorators'

@decorate
class MyComponent extends Component {

}