Currency Converter
使用 <T> 组件
一起来做翻译吧!
概览
终于到真正翻译的时候了!
完成 <T> 组件的设置后,你就可以将应用翻译成任何你需要的语言。
具体分为两个步骤:
添加 <GTProvider> 组件
添加 <T> 组件
添加 <GTProvider> 组件
先在应用中添加 <GTProvider> 组件。
好在这一步只需做一次。
import { GTProvider } from 'gt-next'
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}为什么需要 <GTProvider> 组件?
<GTProvider> 负责将翻译数据从服务器传递到客户端。
只要需要在客户端渲染 <T> 组件,就必须将其置于 <GTProvider> 的包裹之中。
可在此处了解更多关于 <GTProvider> 组件的信息。
添加 <T> 组件
你一直期待的部分……
现在我们只需在内容开头放一个 <T>,并在结尾加上闭合标签 </T>。
别忘了添加一个唯一的标识符字符串,作为该翻译的 id。
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;就这样!你现在可以开始为你的应用做翻译了!
本指南如何?