Предоставление сторонних методов lib (Firepad) в компоненте React

Question

Я искал ответы на эти вопросы уже пару недель и прочитал все, что смог найти (в SO, в документах React, в источнике для связанных библиотек, таких как response-codemirror и т. Д.), и не могу найти ответ, который я могу понять. Я немного слаб в Реакте, и это, вероятно, где я падаю.

Я работаю над проектом, созданным в React (под названием Pharaoh, браузер и редактор для настольных компьютеров, предназначенный для аудитории), который использует Firepad (и поэтому использует Firebase и CodeMirror, которые мне нравятся). Я немного использовал все вышеперечисленные технологии, включая написание редактора Markdown для настольных компьютеров с использованием CodeMirror и нескольких демонстрационных / практических приложений с использованием Firebase. Моя проблема здесь почти наверняка заключается в том, что я не совсем понимаю React.

То, что я пытаюсь сделать, - это получить возможность сохранять файлы из нашего экземпляра Firepad/CodeMirror (на рабочий стол). Я в целом знаю, как использовать FileReader и API файловой системы HTML5, и это может быть сделано даже с node-fs, поскольку моя цель здесь - наше настольное приложение (которое работает на NW.js).

CodeMirror имеет несколько действительно полезных методов, таких как editorName.codeMirror.doc.getValue() который будет работать отлично; Firepad имеет еще более простой editorName.firepad.getText() (а также .setText() который я также использовал для загрузки файлов из файловой системы). Я знаю, как они работают, и вижу, как я возьму то, что они вернут, и сохраню это, это не проблема. Моя проблема в том, что я не могу получить доступ к этим методам. Вероятно, это какая-то глупая вещь, которую я должен знать о доступе к методам из сторонних библиотек или из компонентов в целом, но я как-то озадачен этим. Инструмент, который я часто использую на работе, Codeshare.io, который, как мне кажется, встроен в React и использует Firepad, предоставляет эти методы, поэтому я собираюсь разобраться в их источнике (yay для cURL) и посмотреть, смогу ли я найти какой-либо ответы, но что-нибудь быстрее было бы очень полезно.

Большое спасибо!

Примечание: я думаю, мне нужно заработать больше ТАК репутации; удалил / переделал кучу ссылок перед публикацией.

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 редактор.

Надеюсь, это поможет.