Skip to navigation

@mdx-js/react

MDX 的 React 上下文。

¥React context for MDX.

内容

¥Contents

这是什么?

¥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:

Shell
npm install @mdx-js/react

在 Deno 中使用 esm.sh

¥In Deno with esm.sh:

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

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

¥In browsers with esm.sh:

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

使用

¥Use

TypeScript
/**

 * @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

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

¥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

返回

¥Returns

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

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

MergeComponents

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

¥Custom merge function (TypeScript type).

参数

¥Parameters

返回

¥Returns

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

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

Props

MDXProvider(TypeScript 类型)的配置。

¥Configuration for MDXProvider (TypeScript type).

字段

¥Fields

类型

¥Types

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

¥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

MDX 中文网 - 粤ICP备13048890号