Question

在React生命周期的render()函数中使用ReactDOM中的componentDidMount()方法时，我正在努力使用我的代码功能。

我正在使用react-codemirror拥有CodeMirror库的包装器，该包装器可以很好地适应React，并且我正在尝试在安装组件时添加一些默认的“书签”。

我的代码部分如下所示：

componentDidMount() {
  var domContainer = document.createElement('span');
  var bookmarkElement = (<span>Test Bookmark</span>);

  this._codeMirror = this.reactCodeMirrror.getCodeMirror();
  this._codeMirror.replaceRange(' ', { line: 0, ch: 0 });
  this._codeMirror.markText({ line: 0, ch: 0 }, { line: 0, ch: 1 }, {
    replacedWith: ReactDOM.render(bookmarkElement, domContainer),
  });
}

我将ReactDOM.render()方法提取到变量以检查其值并且为null。但由于某种原因，当我将markText代码包装在一个毫秒的setTimeout()内时，它会正确地呈现元素。

componentDidMount() {
  var domContainer = document.createElement('span');
  var bookmarkElement = (<span>Test Bookmark</span>);

  this._codeMirror = this.reactCodeMirrror.getCodeMirror();
  this._codeMirror.replaceRange(' ', { line: 0, ch: 0 });

  setTimeout(function () {
    this._codeMirror.markText({ line: 0, ch: 0 }, { line: 0, ch: 1 }, {
      replacedWith: ReactDOM.render(bookmarkElement, domContainer),
    });
  }, 1);
}

编辑：添加有关问题的更多信息。

此时我在render（）方法中有以下代码。

render() {
    <CodeMirror ref={(codeMirror) => { this.reactCodeMirror = codeMirror; }} />
}

该方法工作正常，因为正在渲染编辑器，但我无法动态添加componentDidMount()方法中的“书签”，因为ReactDOM.render()方法正在返回当不在setTimeout()方法内时为null。

使用ReactDOM.render()方法时，我有什么问题或忽视吗？有没有办法让它在没有setTimeout()包装器的情况下正常工作？

谢谢！

ComponentDidMount方法

0 个答案: