在 docusaurus 页面中导入 javascript 模块

Question

在我的文档网站的 doc/*.md 页面之一上，我希望能够拥有一个 javascript 树视图。https://github.com/storybookjs/react-treebeard 似乎运行良好，但我并不完全清楚如何将此 javascript 合并到一个特定页面中。

我尝试将示例 javascript 从快速入门部分复制到特定的 *.md 文件中的<script></script>标记中，但在 JS 控制台中出现“语法错误：无法在模块外使用导入语句”错误。

然后我从 *.md 文件中取出导入并将它们放在 website/siteConfig.js 的顶部：

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import {Treebeard} from 'react-treebeard';

关于我应该在哪里放置这些导入语句的任何想法？

Answer 1

注意：此答案适用于 docusaurus 的 v2。

根据 docusaurus 文档介绍部分，docusaurus 由 MDX 提供支持。

通过 JSX 编写交互式组件并嵌入 Markdown 中的 React

这允许开发人员在 Markdown 文件中编写 JSX 并以与在 React 项目中使用的方式相同的方式使用 React 组件，因此您所要做的就是在项目中添加react-treebeard作为依赖项，然后在 doc/mark_down_file.md 导入并在您添加的示例中以相同的方式使用 treebeard。

我已经有一个 codeandbox.io 项目设置为使用 treebeard 库，您可以在此处或实时查看我是如何做到的

这是我导入和使用 Treebeard 的片段：

---
id: treebeard
title: Tree beard
---

import TreeView from "../src/components/TreeView.js"

You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).


export const Highlight = ({children, color}) => (
<span
style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
{children}
</span>
);

----

<TreeView />

----

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

检查代码docs/treebread.mdx和Treebread代码框，您可以在中找到MDX文件的代码和代码 src/components/TreeView.js