在Docusaurus页面中导入JavaScript模块

Question

在Docusaurus页面中导入JavaScript模块

4

在我的文档网站中，我想在 doc/*.md 页面中使用一个 JavaScript 树形视图。看起来https://github.com/storybookjs/react-treebeard非常适合，但是我不太清楚如何将此 JavaScript 添加到一个特定的页面中。

我尝试将快速入门部分的示例 JavaScript 复制到特定的 *.md 文件中，并将其放在一个 <script></script> 标记中，但是在 JS 控制台中出现了 "SyntaxError: Cannot use import statement outside a module" 错误。

然后我将 import 去掉，放在 website/siteConfig.js 的顶部：

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

您有什么想法，应该把这些导入语句放在哪里？

- neubert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ROOT · Accepted Answer

注意: 本回答适用于docusaurus的v2版本。

根据docusaurus文档简介部分，docusaurus使用MDX技术。

通过JSX和React编写交互式组件嵌入在markdown中

这使得开发人员可以在Markdown文件中编写JSX，并像在React项目中使用react组件一样使用它们，所以你只需要将react-treebeard添加到你的项目依赖中，然后在doc/mark_down_file.md中导入并像你添加示例一样使用treebeard即可。

我已经有一个codesandbox.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_!

请查看codesandbox中的代码，您可以在docs/treebread.mdx中找到MDX文件的代码，src/components/TreeView.js中找到Treebread的代码。