javascript - 如何使用 React-Intl 呈现格式化消息列表

Question

我有一个包含标准项目的导航，例如:联系方式、服务、价格等...我将其呈现为:

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-intl 中的 FormattedMessage 在 React 中呈现包含项目的列表？

Answer 1

您需要将消息传递给 intl。例如:

{
    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>
    );
});