Question

我从数据库获取数据。

然后将其更改为Symbol（react.elemet）

为

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

我在数组[1]中使用push React-CodeMirror

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返回不完整当我渲染时。

我该如何解决？

感谢您阅读：-）

renderToString ReactCodeMirror渲染不完整

0 个答案: