Javascript Reactjs-强制刷新的工作流是什么？

我只是尝试创建一个封装CodeMirror 4.1编辑器的react组件

我遇到过这样一种情况，即在加载组件后强制刷新，这是一种解决方法，但我不太确定在将react添加到图片中时实现这一点所需的工作流

建议是，为了克服这个错误，我需要

调用。调整包装容器大小后刷新

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

  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());
          }}
        });
      },

它通过父组件的渲染功能加载

我试过了

钩住窗口调整大小事件，如中的React手册所示 编辑器组件。 强制刷新父组件的componentDidMount 使用$editarea.refresh的函数； 但这两种方法似乎都不起作用

因此，如果有人能告诉我正确的方法，我将不胜感激

很多thx都帮助了我。.refresh是CodeMirror上的一个函数，我还没有完全理解。我在parents componentDidLoad事件中使用了该帖子中建议的方法

componentDidMount: function () {              
  $('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
  });        
},

使用该属性引用渲染节点，而不是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());
        }}
      });
    },

---

最好不要在React组件中使用id。它对页面的其余部分进行假设，例如，只有一个编辑器，并且没有其他组件将使用该ID。您可以使用this.getDOMNode获取组件的DOM节点，并从那里执行操作。Thx vm。您是否可以确认您的意思是我应该通过ref引用CodeMirror节点，而不是在render事件中替换textarea的id。又是Thx。谢尔就是一个例子。非常感谢。非常有用。鉴于textarea是基本元素，您也可以使用this.getDOMNode