如何將 mdx 文件中的代碼片段傳遞給 React 組件？

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或棱鏡來實現這一點。 它們易於使用。