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

Question

我有一个navigation标准项目，例如：联系方式，服务，价格等...我将其呈现为：

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

工作正常。但是现在我需要翻译此导航，并react-intl为此使用库。因此，对于react-intl 文档，我必须这样使用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使用FormattedMessagefrom中的项目渲染列表react-intl？

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