Reactjs——强制刷新的工作流是什么?

Reactjs - what is the workflow to force a refresh?

本文关键字：工作流 是什么 刷新 Reactjs      更新时间：2023-09-26

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

我遇到了这个问题，一旦组件加载，就会通过强制刷新来解决这个问题，但是当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();

，但这两个似乎都不起作用

所以如果有人能告诉我正确的方法，我会很感激的。

许多thx

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

所以这篇文章帮助了我。.refresh()是codemmirror上的一个函数，我还没有完全理解。我在parents componentDidLoad事件中使用了该方法。

componentDidMount: function () {              
  $('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
  });        
},
相关文章：