在React组件中公开第三方lib (Firepad)方法。

Question

几个星期以来，我一直在寻找答案，我已经阅读了我能找到的所有相关信息(比如，react的文档，react的源代码，比如read codemirror等等)，但是我找不到一个我能理解的答案。我的反应有点弱，那可能就是我摔倒的地方。

我正在开发一个内置于React中的项目(名为法老，一个用于教室的浏览器和桌面编辑器)，它使用Firepad (因此，我喜欢使用Firebase和CodeMirror )。我使用了上述所有技术，包括使用CodeMirror编写桌面标记编辑器，以及使用Firebase编写一些演示/实践应用程序。我在这里的问题几乎肯定是不理解，反应那么好。

我要做的是获得将文件从Firepad/CodeMirror实例中保存到桌面上的能力。我通常知道如何使用FileReader和HTML5文件系统API，甚至可以用node-fs来完成，因为我的目标是我们的桌面应用程序(它运行在NW.js上)。

CodeMirror有一些非常有用的方法，比如editorName.codeMirror.doc.getValue()，它可以很好地工作；Firepad有一个更简单的editorName.firepad.getText() (还有.setText()，我也会用它从文件系统加载文件)。我知道这些是如何工作的，我可以看到我如何拿出他们返回的东西并把它保存下来，这是没有问题的。我的问题是，我实际上无法访问这些方法。这可能是一些我应该知道的关于从第三方库或者从组件访问方法的愚蠢的事情，但是我有点困惑。Codeshare.io是我在工作中经常使用的工具，我认为它是内置于React中并使用Firepad的，它公开了这些方法，所以我将深入挖掘它们的源代码(yay for cURL)，看看是否能找到任何答案，但是任何更快的方法都会非常有用。

非常感谢！

注:我想我需要获得更多的声誉；删除/修改了一堆链接，然后才发帖。

Answer 1

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

由于firepad需要全局ace，所以在导入firepad之前，要将大括号分配给全局变量like(不是最好的方法，但有效)。

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编辑器也是如此。

希望这会有所帮助。