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

Question

几周来我一直在寻找这个问题的答案，我已经通读了我能找到的所有相关内容（在 SO 上，在 React 的文档中，在相关库的源代码中，如 react-codemirror等），找不到我能理解的答案。我在 React 方面有点弱，这可能是我失败的地方。

我正在开发一个使用 Firepad（因此使用我喜欢的 Firebase 和 CodeMirror）的 React（称为 Pharaoh，一种用于课堂的浏览器和桌面编辑器）构建的项目。我已经稍微使用了上述所有技术，包括使用 CodeMirror 编写桌面 Markdown 编辑器以及使用 Firebase 编写一些 demo/practice 应用程序。我的问题几乎肯定是对 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()，我最终也用它从文件系统加载文件）。我知道这些是如何工作的，并且可以看到我将如何获取它们 return 并将其保存出来，这没问题。我的问题是我实际上无法访问这些方法。这可能是一些愚蠢的事情，我应该只知道关于从第三方库或一般组件访问方法，但我有点难过。我在工作中经常使用的工具 Codeshare.io，我相信它是在 React 中构建并使用 Firepad，公开了这些方法，所以我将深入研究它们的源代码（yay for cURL）并看看我是否可以找到任何答案，但任何更快的东西都会非常有帮助。

非常感谢！

注意：我想我需要获得更多的 SO 声望； removed/altered 发布前的一堆链接。

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

希望这会有所帮助。

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

Exposing third-party lib (Firepad) methods in a React component

javascript

reactjs

codemirror

refs

firepad