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

我在这里看到两个选项：

向您的渲染树添加一个 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>
  );

使用 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>
  );

那么您不需要第二部分，您在其中手动创建了编辑器。

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

How to use Monaco Editor in a React functional component?

javascript

reactjs

monaco-editor