在React环境下，是如何在弹出框中加载编辑器的？

[LiuYnag]

环境：React+AntDesign

代码：

import React, { useEffect } from 'react';
import {  Modal } from 'antd';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

useEffect(() => {
    if (visible) {
      const cherryInstance = new Cherry({
        id: 'markdown-container',
        value: '# welcome to cherry editor!',
      });
    }
  }, [visible]);


<Modal
  visible={visible}
  title="markdown"
  destroyOnClose
  maskClosable={false}
  width="80%"
>
  <div id="markdown-container"/>
</Modal>

问题描述：我本意是想在弹窗里面加载markdown编辑器的，但是目前好像是没有识别到Modal弹窗里面的DOM节点，直接在整个页面的根节点上面自动创建了一个ID为markdown-container的DIV容器。

问题：就是想请问，是如何将编辑器加载到弹出框中的目标容器的？

[humyfred]

主要是渲染的时机问题，当visible为true此时DOM上还未出现Modal内id为markdown-container的div 元素，cherry默认就会在根节点创建。

正确做法是保证元素出来之后再调用创建cherry的实例

[LiuYnag]

更改了一下代码：

const editorRef = useRef<HTMLDivElement>(null);
useEffect(() => {
    if (editorRef.current) {
      const cherryEditor = new Cherry({
        id: 'markdown-container',
        value: '# welcome to cherry editor!',
        editor: {
          theme: 'default',
          defaultModel: 'edit&preview',
        },
        toolbars: {
          toolbar : ['bold', 'italic', 'strikethrough', '|', 'color', 'header', '|', 'list', { insert: [ 'image', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'line-table', 'bar-table' ], }, 'settings'],
        },
      });
    } 
  }, [editorRef.current])

根据节点是否存在来判断渲染时机