使用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" })} />

不要使用const