импорт модуля javascript на странице docusaurus - PullRequest
Новая
       5

импорт модуля javascript на странице docusaurus

1 голос
/ 24 января 2020

На одной из страниц документации / *. Md на моем веб-сайте документации я хотел бы иметь возможность просмотра javascript в виде дерева. https://github.com/storybookjs/react-treebeard кажется, что это будет работать хорошо, но мне не совсем понятно, как я могу включить эту javascript в одну конкретную c страницу.

Я пытался скопировать Пример javascript из раздела «Быстрый запуск» в файл спецификаций c * .md в теге <script></script>, но я получил ошибку «SyntaxError: Невозможно использовать оператор импорта вне модуля» в консоли JS.

Затем я взял импортированные файлы из файла * .md и поместил их в начало веб-сайта / siteConfig. js: 

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

Любые идеи относительно того, куда я должен поместить эти операторы импорта?

1 Ответ

3 голосов
/ 27 января 2020

ПРИМЕЧАНИЕ : Этот ответ для docusaurus v2.

Согласно документации по docusaurus Раздел введения , docusaurus работает на MDX.

Создание интерактивных компонентов с помощью JSX и React, встроенных в уценку

Это позволяет разработчикам писать JSX в файлах Markdown и использовать компоненты реагирования так же, как они используются в проектах React, поэтому все, что вам нужно сделать, это добавить реагирующее дерево в качестве зависимости в вашем проекте, а затем в импорт doc / mark_down_file.md и использовать дерево таким же образом в добавленном вами примере.

У меня уже есть коды и окно. Проект io настроен на использование библиотеки treebeard, вы можете увидеть, как я это сделал здесь или live view

и вот фрагмент, куда я импортировал и использовал 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_!

Проверьте коды и поле для кода, вы можете найти код для файла MDX в docs/treebread.mdx и Treebread код в src/components/TreeView.js

...