renderToString ReactCodeMirror сделать рендеринг неполным - PullRequest
Новая
       27

renderToString ReactCodeMirror сделать рендеринг неполным

0 голосов
/ 08 ноября 2018

У меня есть данные из базы данных.

И я изменяю его на Symbol (реаги.элемет)

в 

(5) [{…}, {…}, {…}, {…}, {…}]
0: {$$typeof: Symbol(react.element), type: "div"
1: {$$typeof: Symbol(react.element), type: ƒ, 
...

Я использую push React-CodeMirror в массиве [1] 

context.push(
          <ReactCodeMirror
            value={codeContent}
            options={options}
          />
        );

Когда я отрисовываю <div>{context}</div>, он отображается как то, что я думал. ({context} просто используется для проверки правильности обработки данных.)

Но я должен поместить эти данные в contenteditable и опасно SetInnerHTML, поэтому я пишу 

<p
    contentEditable={true}
    dangerouslySetInnerHTML={{__html:ReactDOMServer.renderToString(context)}}/>

Но ReactDOMServer.renderToString (context) возвращает только это. 

<div class="ReactCodeMirror" data-reactroot=""><textarea autoComplete="off">func = () =&gt; {
    ES6 follow!!
};
    how do you think about it?</textarea></div>

а что надо вернуть 

<div class="ReactCodeMirror"><textarea autocomplete="off" style="display: none;">func = () =&gt; {
    ES6 follow!!
};
    how do you think about it?</textarea><div class="CodeMirror cm-s-default CodeMirror-simplescroll"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-simplescroll-horizontal" cm-not-content="true" style="display: none;"><div></div></div> and ~~~

Так что я хочу знать, почему renderToString возвращает неполное когда я рендеринг.

Как я могу решить это?

Спасибо, что прочитали: -)

...