Translations for constants files in react

问题

I am trying to find best concept of translations for my react app.

I have a higher order component for translations and use it by:

export default translate('MyComponent')(MyComponent);

And inside a component I have all texts available by props - it works fine for me.

But, I have a lot of pure javascript files with constants and also need a tranlations there. There is for example validation schema's with error messages or constats with select elements like:

export default [
    {
        value: 'aaa',
        label: 'bbb', // want to translate this label
    }
];

What is the best aproch to translate pure js files in react app?

回答1:

looks like you use i18next (translate hoc).

Just import i18next on the file and use t directly:

import i18next from 'i18next';
export default {
    error: {
        value: 'aaa',
        label: i18next.t('yourKey'), // want to translate this label
    }
};

But better would be translating inside the component - so translation can adapt to language change. So i consider doing what Chase suggest would be best option:

export default {
    error: {
        value: 'aaa',
        key: 'bbb', // use it as key for t call
    }
};

component

import Constants from './Constants.js';
const { error } = Constants;

...


render(){
    const { t } = this.props;
    return <span>{${t(error.key)}}</span>
}

回答2:

I'm kind of confused on the question, but would something like this work?

Constants.js

export default {
    error: {
        value: 'aaa',
        label: 'bbb', // want to translate this label
    }
};

Then in a component you can destructure it like

import Constants from './Constants.js';
const { error } = Constants;
...
render(){
    return <span>{`Error: ${error.label}`}</span>
}

Assuming there is only one error container like the example you provided.

回答3:

I'm not sure how your translation is organized exactly but I had similar situation with constants translation and I found solution that suited me. If you have translation file with key - value translation format you can use it.

So you have constants file like this:

export default [
  {
    id: 1,
    label: 'Cat'
  },
  {
    id: 2,
    label: 'Dog'
  }
]

And have translation for this values:

{
  "Animal.title": {
    "en-uk": "Animals",
    "da-dk": "Dyr"
  },
  "Animal.cat": {
    "en-uk": "Cat",
    "da-dk": "Kat"
  },
  "Animal.dog": {
    "en-uk": "Dog",
    "da-dk": "Hund"
  }
}

And you have HOC that provides you translate method and MyComponent that you need to translate (not sure how it's implemented in your app but I imagine it like this).

import Animals from './constants/animals'

class MyComponent extends React.Component {
  render() {
    const { translate } = this.props
    return (
      <div>
        {translate('Animal.title')}
        {Animals.map(animal => (
           <Animal 
             id={animal.id} 
             name={animal.label} 
           />
        )}
      </div>
    )
  }
}

translate('MyComponent')(MyComponent);

So now we have translated MyComponent but there is a problem - constants from pure js file are not translated. In this case I see only one solution - rewrite constants in this way:

export default [
  {
    id: 1,
    label: 'Animal.cat'
  },
  {
    id: 2,
    label: 'Animal.dog'
  }
]

We replaced labels with translation key, so now we can change out MyComponent to translate labels:

class MyComponent extends React.Component {
  render() {
    const { translate } = this.props
    return (
      <div>
        {translate('Animal.title')}
        {Animals.map(animal => (
           <Animal 
             id={animal.id} 
             name={translate(animal.label)} 
           />
        )}
      </div>
    )
  }
}

来源：https://stackoverflow.com/questions/44518857/translations-for-constants-files-in-react