reactjs - 带有 gatsby-plugin-intl 的 Gatsby 语言本地化 Mdx 文件

Question

我正在尝试使用 gatsby-plugin-intl 本地化页面。.js 文件没有问题，如下所述，但我应该如何为 .mdx 文件制作它？

import React from "react"
import { FormattedMessage, injectIntl, navigate } from "gatsby-plugin-intl"

const MyPage = ( {intl} ) => (
  <Layout>
     <h2><FormattedMessage id="TITLE"/></h2>
  </Layout>
)

export default injectIntl(MyPage)

我试图在这里做出类似的逻辑：

---
name: Settings
route: /documentation/settings
---

import { Playground, Props } from 'docz'
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const intl = useIntl()

## Settings

intl.formatMessage({ id: "TITLE"})

Answer 1

每个想法看起来都正确，但您的 mdx 文件有错误

const intl = useIntl()

使用 FormattedMessage 组件代替消息示例

<FormattedMessage id="TITLE" />

或您的组件

<Yourcomponents title={useIntl().formatMessage({ id: "TITLE" })} />

不要使用常量