react-intlで属性値を多言語化する

2017/01/31 16:02:30

単純なノードとしてなら、``とかそのまま使えばいい。
けど、`title`とか`alt`とか`placeholder`とか属性値およびそれ以外のフックとかでどうすんのってことを調べたメモ。

もちろん、根本に`<IntlProvider />`がある前提は変わらず。

方法1:

const React = require('react');
const { FormattedMessage } = require('react-intl');

class Foo extends React.Component {
  render() {
    return (
      <img alt={<FormattedMessage id="foo" />}
    )
  }
}

キモいけどできる、キモいけど。

方法2: injectIntl()

const React = require('react');
const { injectIntl } = require('react-intl');

injectIntl(class Foo extends React.Component {
  render() {
    const { formatMessage } = this.props.intl
    return (
      <img alt={formatMessage({ id: 'foo' })}
    )
  }
})

おそらくコレが公式の推奨パターン。
文字列連結とかしたいならコレしかなさそう

方法3: context

const React = require('react');
const { intlShape } = require('react-intl');

class Foo extends React.Component {
  static get contextTypes() {
    return { intl: intlShape };
  }

  render() {
    const { formatMessage } = this.context.intl
    return (
      <img alt={formatMessage({ id: 'foo' })}
    )
  }
}

大差なし。

ほか

方法2でやっておけばよさそう。
方法1で事足りるならそれでもいいけど、やっぱりキモいと思うのは俺だけ？

See: https://github.com/yahoo/react-intl/wiki#formatting-data