React.Intl подстрока от <FormattedMessage>

Question

Я работаю над своим первым проектом с i18n и столкнулся с этой проблемой. Моему клиенту нужна панель навигации с раскрывающимися текстами в зависимости от просматриваемого в данный момент раздела. Примерно так:

Так что для каждого ярлыка я использую FormattedMessages, например:

<FormattedMessage id="navigation.what"/>
<FormattedMessage id="navigation.how"/>

Я получаю все строки из файла .json.

Теперь я думаю - вы знаете, есть ли какой-либо способ использовать .substring в FormattedMessage?

Также имеет ли этот подход какой-либо смысл, или я должен просто использовать разные строки для расширенной и сокращенной метки в .json и покончить с этим?

Answer 1

Компонент

<FormattedMessage id="navigation.what"/> всегда возвращает диапазон.Для получения строки из react-intl вы должны использовать функцию formatMessage().Вы можете использовать его следующим образом:

Внедрить Intl, используя injectIntl компонент более высокого порядка:

import { injectIntl } from 'react-intl';

@injectIntl
class YourComponent extends Component {
...
render () {
...
  const {formatMessage} = this.props.intl;
...
  <span>{formatMessage(navigation.how).substring()}</span>

Пройдите через эту функцию для получения более подробной информации: formatMessage ()

Пример использования