我只是想创建一个包装CodeMirror(4.1)编辑器的react组件.

我遇到了this problem,在组件加载后,通过强制刷新进行了一次工作循环,但是我不确定在将反应添加到图片中后需要实现的工作流程.

建议是要克服错误,我需要

“Call .refresh() after resizing the wrapping container.”

我的代码当前在编辑器组件中如下所示：

  function ($, React, CodeMirror) {

    return React.createClass({

      render: function () {
        console.log("render-editarea");
        return (
          <textarea id="editarea">
-- Comment here
USE [All Data Items];
SELECT ID FROM [Test Event]
          </textarea>
        )
      },

      componentDidMount: function () { 
        var onExecute = this.props.onExecute;
        var editorNode = document.getElementById("editarea");
        console.log("componentDidUpdate-editarea:" + editorNode); 
        var editor = CodeMirror.fromTextArea(editorNode, {        
          lineNumbers: true,
          matchBrackets: true,
          indentUnit: 4,
          mode: "text/x-mssql",
          extraKeys: {"Ctrl-E": function(cm) {    
            console.log(editor.getValue());
            onExecute(editor.getValue());
          }}
        });
      },

并通过父组件的Render函数加载

我努力了

>钩住窗口调整大小事件(如React手册中所示),
编辑器组件.
>强制刷新父组件的componentDidMount
使用$(“#editarea”).refresh();函数；

但是这些似乎都不起作用

因此,如果有人可以向我展示正确的方法,我将不胜感激.

多谢

解决方法:

使用ref属性来引用渲染的节点,而不是ID或DOM选择器：

function ($, React, CodeMirror) {

  return React.createClass({

    render: function () {
      console.log("render-editarea");
      return (
        <textarea ref="editarea">
-- Comment here
USE [All Data Items];
SELECT ID FROM [Test Event]
        </textarea>
      )
    },

    componentDidMount: function () { 
      var onExecute = this.props.onExecute;
      var editorNode = this.refs.editarea;
      console.log("componentDidUpdate-editarea:" + editorNode); 
      var editor = CodeMirror.fromTextArea(editorNode, {        
        lineNumbers: true,
        matchBrackets: true,
        indentUnit: 4,
        mode: "text/x-mssql",
        extraKeys: {"Ctrl-E": function(cm) {    
          console.log(editor.getValue());
          onExecute(editor.getValue());
        }}
      });
    },