如何在 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>
  );

然后您不需要第二部分，在那里您手动创建编辑器。