Reactjs - 如何强制刷新页面？

Question

我正在尝试创建一个包装CodeMirror (4.1)编辑器的React组件。

我遇到了这个问题，通过在组件加载后强制刷新解决，但是当React添加到图片中时，我不太确定需要实现的工作流程。

建议是为了解决错误，我需要在调整包装容器大小后调用.refresh()。

我的代码目前如下所示：

  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(); 进行刷新

但是这些都似乎没有起作用

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

非常感谢

- Simon Woods

Answer 1

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

- Ross Allen

---

鉴于文本区域是基础元素，您也可以使用this.getDOMNode()。 - Jared Forsyth

Answer 2

所以这篇文章帮助了我。.refresh()是CodeMirror上的一个函数，我没有完全理解它。我在父组件的componentDidLoad事件中使用了那篇文章中建议的方法。

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

- Simon Woods

---

在React组件中最好不要使用ID。这会对页面的其余部分进行假设（例如，只有一个编辑器，并且没有其他组件将使用该ID）。您可以通过使用this.getDOMNode()来获取组件的DOM节点并从那里处理相关事宜。 - Brigand

谢谢。您能否确认一下，您的意思是我应该通过引用来引用CodeMirror节点（而不是在渲染事件中替换文本区域的ID）？再次感谢。 - Simon Woods

这是一个示例 CodeMirror 组件。 - Brigand

非常感谢。非常有帮助。 - Simon Woods