如何在 React 功能組件中使用 Monaco Editor？

Question

我的 React 項目中有一個功能組件。 我已將 Monaco 編輯器依賴項包含為

import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';

如何從這里使用Editor對象來實際渲染和測試 monaco-editor 的東西？

我有如下代碼，

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <MonacoEnvironment.
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

我正在查看 MonacoEnvironment 對象，但我對將其設置為編輯器一無所知。

我想在我的代碼中模仿以下功能，

monaco.editor.create(document.getElementById('container'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: 'javascript'
});

Answer 1

我在這里看到兩個選項：

1. 向您的渲染樹添加一個 HTML 元素，它可以托管編輯器。 您在第二個代碼片段中有document.getElementById調用。 這需要一個帶有 id container的元素：

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <div id="container />
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

2. 使用 Monaco 編輯器 React 包裝器（例如react-monaco-editor ）並將其添加到您的渲染樹中：

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <MonacoEditor
          width="800"
          height="600"
          language="javascript"
          theme="vs-dark"
          value={code}
          options={options}
        />
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

然后您不需要第二部分，在那里您手動創建編輯器。