将 i18next 与 coreUI 反应侧边栏一起使用答案

【问题标题】：Use i18next with coreUI react sidebar将 i18next 与 coreUI 反应侧边栏一起使用
【发布时间】：2021-02-26 09:59:26
【问题描述】：

我正在使用 coreUI 反应免费的管理仪表板模板https://github.com/coreui/coreui-free-react-admin-template/ n 我正在使用 i18next 翻译文本并设置网站方向（RTL / LRT）https://react.i18next.com/

问题是我不确定如何将 i18next 与模板侧边栏的内容一起使用，因为它只是一个列表/对象数组，如下所示，

const menuList =  [
  {
    _tag: 'CSidebarNavItem',
    name: 'Dashboard',
    to: '/dashboard',
    icon: <FontAwesomeIcon icon={faTachometerAlt} className="c-sidebar-nav-icon"/>,
  },
...
]

因为它不是作为一个反应组件构建的，所以我不能做类似的事情

name: {t('Dashboard')},

list 在侧边栏中被调用，如下所示...

<CSidebarNav>
  <CCreateElement
    items={menuList }
    components={{
      CSidebarNavDivider,
      CSidebarNavDropdown,
      CSidebarNavItem,
      CSidebarNavTitle
    }}
  />
</CSidebarNav>

所以我想在将列表作为“项目”发送之前需要对其进行操作以进行渲染和显示

【问题讨论】：

标签： reactjs core-ui

【解决方案1】：

您可以使用翻译（渲染道具） https://react.i18next.com/latest/translation-render-prop

import { Translation } from 'react-i18next';
const menuList =  [
  {
    _tag: 'CSidebarNavItem',
    name: <Translation>{(t) => <>{t('Dashboard')}</>}</Translation>,
    to: '/dashboard',
    icon: <FontAwesomeIcon icon={faTachometerAlt} className="c-sidebar-nav-icon"/>,
  },
...
]

【讨论】：