@mdx-js/react

MDX 的 React 上下文。

¥React context for MDX.

内容

¥Contents

• 这是什么？

  ¥What is this?

• 我什么时候应该使用这个？

  ¥When should I use this?

• 安装

  ¥Install

• 使用

  ¥Use

• API

  • MDXProvider(properties?)

  • useMDXComponents(components?)

  • MergeComponents

  • Props

• 类型

  ¥Types

• 兼容性

  ¥Compatibility

• 安全

  ¥Security

• 贡献

  ¥Contribute

• 许可证

  ¥License

这是什么？

¥What is this?

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

¥This package is a context based components provider for combining React with MDX.

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

¥When should I use this?

MDX 不需要此包即可与 React 一起使用。请参阅 ¶ 使用 MDX 中的 MDX 提供者 了解何时以及如何使用 MDX 提供程序。

¥This package is not needed for MDX to work with React. See ¶ MDX provider in § Using MDX for when and how to use an MDX provider.

如果你使用 Next.js，请不要使用它。请改为添加 mdx-components.tsx（在 src/ 或 / 中）文件。请参阅 在 nextjs.org 上配置 MDX 了解更多信息。

¥If you use Next.js, do not use this. Add an mdx-components.tsx (in src/ or /) file instead. See Configuring MDX on nextjs.org for more info.

安装

¥Install

这个包是 仅限 ESM。在 Node.js（版本 16+）中，使用 npm 安装：

¥This package is ESM only. In Node.js (version 16+), install with npm:

npm install @mdx-js/react

在 Deno 中使用 esm.sh：

¥In Deno with esm.sh:

import {MDXProvider} from 'https://esm.sh/@mdx-js/react@3'

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

¥In browsers with esm.sh:

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

使用

¥Use

/**

 * @import {MDXComponents} from 'mdx/types.js'
 */

import {MDXProvider} from '@mdx-js/react'
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/react'`.

/** @type {MDXComponents} */
const components = {
  em(properties) {
    return <i {...properties} />
  }
}

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

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

¥👉 Note: you don’t have to use MDXProvider and can pass components directly:

Diff

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

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

¥See ¶ React in § Getting started for how to get started with MDX and React. See ¶ MDX provider in § Using MDX for how to use an MDX provider.

API

该包导出标识符 MDXProvider 和 useMDXComponents。没有默认导出。

¥This package exports the identifiers MDXProvider and useMDXComponents. There is no default export.

MDXProvider(properties?)

MDX 上下文的提供者。

¥Provider for MDX context.

参数

¥Parameters

• properties (Props) — 配置

  ¥properties (Props) — configuration

返回

¥Returns

元素 (JSX.Element)。

¥Element (JSX.Element).

useMDXComponents(components?)

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

¥Get current components from the MDX Context.

参数

¥Parameters

• components（MDXComponents 从 mdx/types.js 或 MergeComponents，可选）— 要使用的附加组件或创建它们的函数

  ¥components (MDXComponents from mdx/types.js or MergeComponents, optional) — additional components to use or a function that creates them

返回

¥Returns

当前组件 (MDXComponents 从 mdx/types.js)。

¥Current components (MDXComponents from mdx/types.js).

MergeComponents

自定义合并函数（TypeScript 类型）。

¥Custom merge function (TypeScript type).

参数

¥Parameters

• components (MDXComponents 从 mdx/types.js) — 上下文中的当前组件

  ¥components (MDXComponents from mdx/types.js) — current components from the context

返回

¥Returns

附加组件 (MDXComponents 从 mdx/types.js)。

¥Additional components (MDXComponents from mdx/types.js).

Props

MDXProvider（TypeScript 类型）的配置。

¥Configuration for MDXProvider (TypeScript type).

字段

¥Fields

• children（ReactNode 从 react，可选）- 子级

  ¥children (ReactNode from react, optional) — children

• components（MDXComponents 从 mdx/types.js 或 MergeComponents，可选）— 要使用的附加组件或创建它们的函数

  ¥components (MDXComponents from mdx/types.js or MergeComponents, optional) — additional components to use or a function that creates them

• disableParentContext (boolean, 默认值: false) — 关闭外部组件上下文

  ¥disableParentContext (boolean, default: false) — turn off outer component context

类型

¥Types

该包完全采用 TypeScript 类型。它导出附加类型 MergeComponents 和 Props。

¥This package is fully typed with TypeScript. It exports the additional types MergeComponents and Props.

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

¥For types to work, make sure the TypeScript JSX namespace is typed. This is done by installing and using the types of your framework, as in @types/react.

兼容性

¥Compatibility

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

¥Projects maintained by the unified collective are compatible with maintained versions of Node.js.

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

¥When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, @mdx-js/react@^3, compatible with Node.js 16.

安全

¥Security

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

¥See § Security on our website for information.

贡献

¥Contribute

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

¥See § Contribute on our website for ways to get started. See § Support for ways to get help.

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

¥This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

许可证

¥License

MIT © 合成器和 Vercel

¥MIT © Compositor and Vercel