Можно ли использовать React-intl в качестве переменной в?

Question

Я использую react-intl а также react-helmet! и я пытаюсь передать мета-описание Шлему как тексту перевода, но кажется, что это невозможно!

Вот что я сделал:

<Helmet
     meta={[{ name: 'description', content: { id: 'homepage.description'} }]}
     link={[{ rel: 'icon', href: 'favicon/favicon-32x32.png' }]}
/>

homepage.description это текст на lang/en/en.json,

Я предполагаю, что если переводы могут быть захвачены и использованы как переменные, это может быть легко использовать, я сделаю это так:

render() {
    const description = formatMessage({ id: 'homepage.description', values: {country: 'Morocco'} });
    return (
        <Helmet
              title={pageTitle}
              meta={[{ name: 'description', content:  {{description}} }]}
              link={[{ rel: 'icon', href: 'favicon/favicon-32x32.png' }]}
            />
    );
}

Если это вообще возможно? или существует какая-либо альтернатива этому или лучшая практика, пожалуйста?

заранее спасибо

Answer 1

Да, это возможно, если вы используете injectIntl, таким образом вы можете получить переведенную строку и использовать всякий раз, когда это необходимо:

import {injectIntl} from 'react-intl';

...
render() {
    const intl = this.props.intl;
    const description = intl.formatMessage({ id: 'homepage.description', values: {country: 'Morocco'} });
    return (
        <Helmet
              title={pageTitle}
              meta={[{ name: 'description', content:  {{description}} }]}
              link={[{ rel: 'icon', href: 'favicon/favicon-32x32.png' }]}
            />
    );
}
...

export default injectIntl(YourComponent);

Answer 2

Вы можете просто сделать:

const Example = injectIntl( ({ intl }) => {
   return (
      <MyComponentt propExampple={ intl.formatMessage({ id: 'translation-ID' }) } />
   )
} );