将 i18next 与 coreUI react 侧边栏一起使用

问题描述

我正在使用 coreUI react 免费管理仪表板模板 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')},

在侧边栏中调用列表如下...

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

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

解决方法

您可以使用翻译（渲染道具） 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"/>,},...
]