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 {

}

我想知道如何，我们可以将这些装饰器写在一个单独的文件中，然后用类

写一些到 pass/connect 的桥梁

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

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 {

}

Answer 2

装饰器只是值，因此您可以将代码更改为

const loaderDecorator = 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
    }
});

const configDecorator = ModuleConfig({
    config: {
        k1: 'Value 1',
        k2: 'Value 2',
        viewClass: ModuleViewClass,
        ...moduleConfig
    }
});

const logDecorator = log({
    config: {
        warning: true,
        error: true,
        breakOnError:false
    }
});

@loaderDecorator
@configDecorator
@logDecorator
class MyComponent extends Component { }

然后你可以自由地将这些变量移动到你想要的任何文件，然后将它们导入到这个文件中以使用它们，例如

import { loaderDecorator, configDecorator, logDecorator } from './my-decorators';

@loaderDecorator
@configDecorator
@logDecorator
class MyComponent extends Component { }

与

export const loaderDecorator = 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
    }
});

export const configDecorator = ModuleConfig({
    config: {
        k1: 'Value 1',
        k2: 'Value 2',
        viewClass: ModuleViewClass,
        ...moduleConfig
    }
});

export const logDecorator = log({
    config: {
        warning: true,
        error: true,
        breakOnError:false
    }
});

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

React ES6, How to keep decorators in separate files

javascript

ecmascript-6

reactjs

babel-decorator