如何使用 Astro.currentLocale 避免样板代码？

Question

这是我如何使用 Astro.currentLocale 在 Astro 中进行翻译的示例。

---
import { getRelativeLocaleUrl } from "astro:i18n"

// Components
// imports ...

// i18n
import { getTranslations, type Lang } from "@/i18n/utils"

const lang = Astro.currentLocale as Lang
const t = getTranslations(lang)
---

<div>
    <div>
        <h2>{t("any-title")}</h2>
        <div>
            <a href={getRelativeLocaleUrl(lang, "any/route")}>
                {t("view-details")}
            </a>
        </div>
    </div>
    <div>
        <InventorySummaryLineChart lang={lang} client:load />
        <InventorySummaryBarChart lang={lang} client:load />
        <InventorySummaryPieChart lang={lang} client:load />
    </div>
</div>

在最后一个 div 标签中，我有 3 个不同的图表，我希望它们被“预渲染”，这样标题和描述在到达客户端时就已经被翻译了。

但是我被迫将 lang 作为 prop 传递，因为我无法使用

window

来获取带有 lang 的 url，并且

document.documentElement.lang

都不会导致稍后渲染设置了 lang 的布局。

如何避免将 lang 作为参数传递给框架组件？并能够在服务器端获取它？

也许有状态管理器，但我怎样才能避免补液问题？

Answer 1

您可以将 Astro 中间件中的值赋给

Astro.locals

，但只能在 Astro 组件中读取，而不能在框架组件中读取。

如果你有React框架组件，你可以使用React context:

天文部分：

---
import { getTranslations } from "@/i18n/utils"

const lang = Astro.currentLocale
const t = getTranslations(lang)
---
<App lang={lang}>
  My other components that can access the React context
</App>

反应部分：

// LangContext.jsx
import { createContext } from 'react'

export const LangContext = createContext()

// App.jsx
import { LangContext } from './LangContext'

export const App = (props) =>
  <LangContext.Provider value={props.lang}>
    {props.children}
  </LangContext>