Kami telah membuat banyak dekorator di ReactApp.

Sekarang kita harus menulis dekorator di setiap file, Kode khas saya terlihat seperti ini.

******** 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 {

}

Saya bertanya-tanya Bagaimana, kita dapat menulis dekorator ini dalam file terpisah dan kemudian menulis beberapa jembatan untuk lulus/terhubung dengan kelas

Seperti saya dapat memiliki file decorators.js, tulis semua dekorator di sini dan kemudian tulis beberapa metode atau injektor untuk menyuntikkan ini ke dalam kelas.

0
Anup Singh 18 Agustus 2017, 09:30

2 jawaban

Jawaban Terbaik

Dekorator hanyalah nilai, jadi Anda dapat mengubah kode Anda menjadi

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 { }

Dan pada saat itu Anda bebas memindahkan variabel tersebut ke file apa pun yang Anda inginkan, lalu mengimpornya ke file ini untuk menggunakannya, mis.

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

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

Dengan

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
    }
});
0
loganfsmyth 18 Agustus 2017, 07:17

Dekorator sebenarnya adalah sebuah fungsi

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

Hanya komposisi fungsi dan aplikasi

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

Jadi Anda bisa membuat semua dekorator Anda sebelumnya

// 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
        }
    })
)

Dan kemudian hanya

import decorate from './decorators'

@decorate
class MyComponent extends Component {

}
1
Yury Tarabanko 18 Agustus 2017, 06:53