在React组件

Question

我几个星期以来一直在寻找这个问题的答案，我已经阅读了我能找到的所有相关内容（在SO上，在React的文档中，在相关库的源代码中，如react-codemirror等） 。），找不到我能理解的答案。我对React很弱，这可能就是我摔倒的地方。

我正在开发一个用React构建的项目（称为Pharaoh，一个用于教室的浏览器和桌面编辑器），它使用Firepad（因此，使用Firebase和CodeMirror，我喜欢）。我已经使用了上述所有技术，包括使用CodeMirror编写桌面Markdown编辑器和使用Firebase编写一些演示/练习应用程序。我的问题几乎肯定只是不了解React。

我要做的是获得将文件保存到Firepad / CodeMirror实例（到桌面）的能力。我一般都知道how to use FileReader and the HTML5 Filesystem API，这甚至可以用node-fs来完成，因为我的目标是我们的桌面应用程序（在NW.js上运行）。

CodeMirror有一些非常有用的方法，如editorName.codeMirror.doc.getValue()，它们可以很好地工作; Firepad有更简单的editorName.firepad.getText()（和.setText()，我最终还会用它来加载文件系统中的文件）。我知道这些是如何工作的，并且可以看出我如何将它们归还并保存，这没有问题。我的问题是我实际上无法访问这些方法。这可能是一些愚蠢的事情，我应该知道从第三方库或一般组件访问方法，但我有点难过。我经常在工作中使用的工具，Codehare.io，我认为它是在React中构建并使用Firepad，暴露了这些方法，因此我即将深入研究它们的来源（yay for cURL），看看我是否能找到任何答案，但更快的任何事情都会非常有用。

非常感谢！

注意：我想我需要获得更多的SO声誉;在发布之前删除/更改了一堆链接。

Answer 1

使用这些npm packages - brace，react-ace，firebase，firepad。

由于firepad需要全局存在ace，因此请为全局变量指定大括号 在导入firepad

之前（不是最好的方式，但有效）

import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';

使用ref获取ReactAce的实例，并使用以下内容在componentDidMount中对其进行初始化。

new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);

与CodeMirror编辑器类似。

希望，这会有所帮助。