Reactjs - 強制刷新的工作流程是什么？

Question

我只是想創建一個包含CodeMirror（4.1）編輯器的react組件。

我遇到了這個問題 ，有一個workround通過強制刷新一旦組件加載，但我不太確定我需要工作流程，當反應添加到圖片中時。

建議是克服我需要的錯誤

“在調整包裝容器大小后調用.refresh（）。”

我的代碼目前在Editor組件中如下：

  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手冊中所示）。
• 使用$("#editarea").refresh();強制在父組件的componentDidMount函數中$("#editarea").refresh();

但這些似乎都不起作用

如果有人能告訴我正確的方法，我將不勝感激。

很多thx

Answer 1

所以這對我有幫助。 .refresh（）是CodeMirror上的一個函數，我還沒有完全理解。 我使用了父文件 componentDidLoad事件中該帖子中建議的方法。

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

Answer 2

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