如何在反应中使用 vue.js mixin？

Question

On a daily basis I'm using vue.js but right now I'm working on a react project. I've got this translation method:

function __(key, replace = null) {
    let translation, translationNotFound = true;

    try {
        translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php);

        if (translation) {
            translationNotFound = false;
        }
    } catch (e) {
        translation = key;
    }

    if (translationNotFound) {
        translation = window._translations[window._locale]['json'][key]
            ? window._translations[window._locale]['json'][key]
            : key;
    }

    if (replace) {
        replace.forEach((value, key) => {
            translation = translation.replace(':' + key, value);
        });
    }

    return translation;
}

In vue I'm using a mixin for this so it can be used everywhere. How can I make sure I can use this method in my react components?

Already red lots of articles online but can't figure it out.

Answer 1

Just export your function

const myFunction = (key, replace = null) => {
    let translation, translationNotFound = true;

    try {
        translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php);

        if (translation) {
            translationNotFound = false;
        }
    } catch (e) {
        translation = key;
    }

    if (translationNotFound) {
        translation = window._translations[window._locale]['json'][key]
            ? window._translations[window._locale]['json'][key]
            : key;
    }

    if (replace) {
        replace.forEach((value, key) => {
            translation = translation.replace(':' + key, value);
        });
    }

    return translation;
}

export default myFunction;

When you want to import

import myFunction from 'path/to/the/file'