Reactjs - 强制刷新的工作流程是什么？答案

【问题标题】：Reactjs - what is the workflow to force a refresh?Reactjs - 强制刷新的工作流程是什么？
【发布时间】：2014-07-07 17:46:32
【问题描述】：

我只是想创建一个包含 CodeMirror (4.1) 编辑器的反应组件。

我遇到了this problem，其中有一个解决方法是在组件加载后强制刷新，但我不太确定在将 react 添加到图片中时我需要实现这一点的工作流程。

建议是为了克服我需要的错误

“调整包装容器大小后调用 .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 手册中所示）编辑器组件。
强制刷新父组件的componentDidMount 函数使用$("#editarea").refresh();

但这些似乎都不起作用

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

很多感谢

【问题讨论】：

标签： javascript jquery codemirror reactjs

【解决方案1】：

所以this post 帮助了我。 .refresh() 是 CodeMirror 上的一个函数，我还没有完全理解。我在 parents componentDidLoad 事件中使用了该帖子中建议的方法。

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

【讨论】：

最好不要在 React 组件中使用 ID。它对页面的其余部分做出假设（例如，只有一个编辑器，并且没有其他组件将使用该 ID）。您可以使用this.getDOMNode() 获取组件的 DOM 节点并从那里执行操作。
感谢虚拟机。您能否确认您的意思是我应该通过 ref 引用 CodeMirror 节点（而不是在渲染事件中替换 textarea 的 id）。再次感谢。 S
这是一个例子CodeMirror component。
非常感谢。很有帮助。

【解决方案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());
        }}
      });
    },

【讨论】：

鉴于 textarea 是基本元素，您也可以使用this.getDOMNode()