Как я могу сделать добавление firepad к моему реактивному проекту?

Question

Так что я учился реагировать и хотел сделать базовый экземпляр firepad. Моя текущая установка имеет один контейнерный div в моем index.html и все мои реагирующие компоненты рендеринга через этот div. Мои текущие попытки и код, который я показываю с этим, были в среде с gulp и browserify, но я также играю с ES6 и webpack. Так что я достаточно гибок в том, чтобы заставить это работать, пока я учусь. Вот код:

"use strict"

var React = require('react')
  , Firebase = require('firebase')
  , fbRoot = 'myURL'
  , CodeMirror = require('codemirror')
  , Firepad = require('firepad')
  , firepadRef = new Firebase(fbRoot + 'session/')
  , myCodeMirror = CodeMirror(document.getElementById('firepad'), {lineWrapping: true})
  , myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});

var WritePage = React.createClass({
  render: function(){
    return (
      <div>
        <div id="firepad"></div>
      </div>
    );
  }
});

module.exports = WritePage;

Первая ошибка, которую я получил, заключалась в том, что не удалось найти файл codemirror.js. Хотя CodeMirror правильно определялся в инструментах разработчика Chrome, я перешел от требования пакета npm к простой привязке двух необходимых файлов codemirror к моему html. Затем он дал мне ошибку о невозможности принять.replaceChild из неопределенного. Затем я попытался переместить все файлы зависимостей в мой index.html, но все еще имел ту же ошибку.replaceChild. У кого-нибудь есть опыт реагирования и firepad? Я прочитал в документах о реактивном огне, что это один из способов привязки firebase к моему сайту, что в моем случае было бы неплохо, если бы создавалась пожарная панель только для чтения. Как я уже сказал, я гибкая, все это новое для меня.

Answer 1

По ссылке, предоставленной Майклом.

Проблема в том, что вы пытаетесь сослаться на элемент DOM до того, как React отобразит ваш компонент.

, myCodeMirror = CodeMirror(document.getElementById('firepad'),{lineWrapping: true})
, myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, {richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});

Перемещая этот код в componentDidMount()он запускается после того, как DOM-элемент CodeMirror создан, и вы сможете ссылаться на узел DOM. Вам также, вероятно, будет проще использовать атрибут React ref вместо document.getElementById(),

Answer 2

Используйте эти npm packages - brace, react-ace, firebase, firepad,

поскольку firepad потребности aceчтобы присутствовать глобально, перед импортом присвойте скобку глобальной переменной как (не лучшим образом, но работает) firepad

import firebase from 'firebase/app';
import 'firebase/database';
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 редактор.

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