Skip to navigation

@mdx-js/preact

MDX 的 Preact 上下文。

内容

这是什么?

该包是一个基于上下文的组件提供程序,用于将 Preact 与 MDX 结合起来。

我什么时候应该使用这个?

该软件包是 不需要,用于 MDX 与 Preact 配合使用。 请参阅 ¶ 使用 MDX 中的 MDX 提供者 了解何时以及如何使用 MDX 提供程序。

安装

这个包是 仅限 ESM。 在 Node.js(版本 16+)中,使用 npm 安装:

Shell
npm install @mdx-js/preact

在 Deno 中使用 esm.sh

TypeScript
import {MDXProvider} from 'https://esm.sh/@mdx-js/preact@2'

在带有 esm.sh 的浏览器中:

HTML
<script type="module">
  import {MDXProvider} from 'https://esm.sh/@mdx-js/preact@2?bundle'
</script>

使用

TypeScript
import {MDXProvider} from '@mdx-js/preact'
import Post from './post.mdx'
// ^-- Assumes an integration is used to compile MDX to JS, such as
// `@mdx-js/esbuild`, `@mdx-js/loader`, `@mdx-js/node-loader`, or
// `@mdx-js/rollup`, and that it is configured with
// `options.providerImportSource: '@mdx-js/preact'`.

/** @type {import('mdx/types.js').MDXComponents} */
const components = {
  em(props) {
    return <i {...props} />
  }
}

console.log(
  <MDXProvider components={components}>
    <Post />
  </MDXProvider>
)

👉 注意: 你不必使用 MDXProvider,可以直接传递组件:

Diff
-<MDXProvider components={components}>
-  <Post />
-</MDXProvider>
+<Post components={components} />

请参阅 ¶ 入门中的 Preact 了解如何开始使用 MDX 和 Preact。 请参阅 ¶ 使用 MDX 中的 MDX 提供者 了解如何使用 MDX 提供程序。

API

该包导出标识符 MDXProvideruseMDXComponents。 没有默认导出。

MDXProvider(props?)

MDX 上下文的提供者。

参数
  • props (Props) — configuration

返回

元素 (JSX.Element)。

useMDXComponents(components?)

从 MDX 上下文获取当前组件。

参数

返回

当前组件 (MDXComponentsmdx/types.js)。

MergeComponents

自定义合并函数(TypeScript 类型)。

参数

返回

附加组件 (MDXComponentsmdx/types.js)。

Props

MDXProvider(TypeScript 类型)的配置。

字段

类型

该包完全采用 TypeScript 类型。 它导出附加类型 MergeComponentsProps

为了使类型正常工作,请确保键入 TypeScript JSX 命名空间。 这是通过安装和使用框架类型来完成的,如 preact 中所示。

兼容性

由统一集体维护的项目与 Node.js 的维护版本兼容。

当我们削减新的主要版本时,我们会放弃对未维护的 Node.js 版本的支持。 这意味着我们尝试保持当前版本 @mdx-js/preact@^3 与 Node.js 16 兼容。

安全

请参阅我们网站上的 § 安全 了解信息。

贡献

请参阅我们网站上的 § 贡献 了解入门方法。 请参阅 § 支持 了解获取帮助的方法。

该项目有 行为守则。 通过与此存储库、组织或社区交互,你同意遵守其条款。

许可证

MIT © 合成器和 Vercel

MDX 中文网 - 粤ICP备13048890号