Как отобразить список форматированных сообщений с использованием React-Intl - PullRequest
Новая
       35

Как отобразить список форматированных сообщений с использованием React-Intl

0 голосов
/ 10 октября 2018

У меня есть navigation со стандартными элементами, такими как: контакты, услуги, цены и т. Д. ... Я представляю это так: 

const menuItemList = menuItems.map((item, index) => {
    return (
        <li key={index}>
            <NavLink to={item.url}>{item.title}</NavLink>
        </li>
    );
});

Работает нормально.Но теперь мне нужно перевести эту навигацию, и я использую библиотеку react-intl для этой цели.Соответственно react-intl doc Я должен использовать FormattedMessage следующим образом: 

<p>
   <FormattedMessage id="mainText"/>
</p>

Это работает.Но как я могу использовать его для отображения списка?Я думаю, что это сработает, но это не так. 

const menuItemsList = menuItems.map((item, index) => {
    return (
        <li key={index}>
            <NavLink to={item.url}>
                <FormattedMessage id="mainText" values={item.title}/>
            </NavLink>
        </li>
    );
});

Ребята, помогите пожалуйста.Как отобразить список с элементами в React, используя FormattedMessage из react-intl?

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

Вы можете использовать defineMessages

const menuItemsList = menuItems.map((item, index) => {
  return (
    <li key={index}>
      <NavLink to={item.url}>
        <FormattedMessage {...MSG[`item_${index}`]} />
      </NavLink>
    </li>
  );
});

const MSG = defineMessages({
  item_0: {
    id: 'items.service',
    defaultMessage: 'Service'
  },
  item_1: {
    id: 'items.contact',
    defaultMessage: 'Contact'
  }
})
0 голосов
/ 22 октября 2018

Вам нужно, чтобы сообщения передавались в международный.Например: 

{
    profile: 'Profile',
    settings: 'Settings'
}

Кроме того, я полагаю, что у вас есть 

const menuItems = [
    {
        url: '/profile',
        title: 'profile'
    },
    {
        url: '/settings',
        title: 'settings'
    }
]

Так что вы можете использовать его следующим образом 

const menuItemsList = menuItems.map((item, index) => {
    return (
        <li key={index}>
            <NavLink to={item.url}>
                <FormattedMessage id={item.title} />
            </NavLink>
        </li>
    );
});
...