是否可以使用 React-intl 作为变量？答案

【问题标题】：Is it possible to use React-intl as variable in?是否可以使用 React-intl 作为变量？
【发布时间】：2017-10-30 20:54:19
【问题描述】：

我正在使用 react-intl 和 react-helmet ！我正在尝试将元描述作为翻译文本传递给 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' }]}
            />
    );
}

如果这可能吗？或者是否存在任何替代这个或最佳实践的方法？

提前致谢

【问题讨论】：

我知道它已经晚了，但我被 react-intl 困住了.....那么你是如何在 en.json 文件中定义你的描述文本的。以便它接受动态变量。

标签： reactjs react-intl react-helmet

【解决方案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);

【讨论】：

【解决方案2】：

你可以这样做：

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

【讨论】：