使用next-intl循环json的方法

y0u0uwnf  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(123)

你好
我需要帮助翻译我的网站,我找不到一种方法来自动翻译检查的关键和价值。

  • en.json和es.json示例:*
`en.json...
"Navigation": [
    {
      "path": "/",
      "text": "Home"
    },
    {
      "path": "/contact",
      "text": "Contact"      
    }
],`

`es.json
"Navigation": [
    {
      "path": "/",
      "text": "Inicio"
    },
    {
      "path": "/contact",
      "text": "Contacto"      
    }
],`

字符串
NavBar.tsx.

`import { useTranslations } from "next-intl";

const translate = useTranslations("Navigation")

translate.map((nav) => console.log(nav.path)) `


有没有一种方法可以循环遍历json,而不必逐行执行?
Thanskkkk:)
我做了Map,但不管用

我期望:

联系我们

lg40wkob

lg40wkob1#

我想你需要一些链接在你的导航部分。也许你可以尝试这样的东西:

  1. create linkElements.js:
    export const linkElements = [ { children:“home”,href:“/",},{ children:“contact”,href:“/contact”,},]
    1.创建Links.js:
    “使用客户端”
    import Link from“next-intl/link”import {useTranslations} from 'next-intl';
    export default function Links({ children,href}){ const t = useTranslations(“Navigation”)
return (
     <Link
         href={href}    
     >
         {t(children)}
     </Link>
 )

字符串
}
现在你的链接标题已经翻译好了,你可以在Navigation.js中Map它:

<ul>
    {LinkElements.map((element, index) => (
       <Links key={index} {...element} />
    ))}
  </ul>


希望这对你有帮助!

相关问题