2

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

我尝试将示例 javascript 从 Quick Start 部分复制到特定的 *.md 文件中的<script></script>标签中，但在 JS 控制台中出现“SyntaxError: Cannot use import statement outside a module”错误。

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

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

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

4

1 回答 1

7

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

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

通过 JSX 和 React 编写交互式组件，嵌入 Markdown

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

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

这是我导入和使用 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的代码，你可以找到MDX文件的代码docs/treebread.mdx和Treebread代码 src/components/TreeView.js

于 2020-01-27T07:36:02.507 回答