如何从mdx文件传递代码片段到反应组件?

Question

我正在为我正在开发的一个故事书应用程序编写文档。我想知道如何为内容设置代码片段。例如:

// ExampleComponent.tsx
import React, { ReactElement } from 'react'
interface ExampleComponentProps {
children: ReactElement
}
const ExampleComponent = ({ children }: ExampleComponentProps): ReactElement => (
<div>{children}</div>
)

// ExampleStory.mdx
import { Meta } from '@storybook/addon-docs/blocks'
import ExampleComponent from './ExampleComponent.tsx'
<Meta title="Example/Overview" />
```tsx 
This works```
<pre className="language-tsx">
{`return (
<div>this works, without the styling</div>
)`}
</pre>
<ExampleComponent>
<pre className="language-tsx">
{`return (
<div>this works the same as above, without the styling</div>
)`}
</pre>
</ExampleComponent>

我已经尝试使用MDXProvider，但这并没有改变任何东西。

Answer 1

我建议您使用react-markdown或prism来实现这一点。它们很容易使用。