我只是想创建一个包含 CodeMirror (4.1) 编辑器的 React 组件。
我遇到了 this problem有一个解决方法是在加载组件后强制刷新,但我不太确定将 React 添加到图片中时我需要实现此目的的工作流程。
建议是为了克服我需要的错误
"Call .refresh() after resizing the wrapping container."
目前我的代码在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函数加载
我试过了
- Hook 窗口调整大小事件(如 React 手册中所示) 编辑器组件。
- 强制刷新父组件的
componentDidMount
使用$("#editarea").refresh();
的函数
但这些似乎都不起作用
所以,如果有人能告诉我正确的方法,我将不胜感激。
非常感谢
最佳答案
使用 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());
}}
});
},
关于javascript - Reactjs - 强制刷新的工作流程是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23743291/