如何使我的reactjs项目添加firepad？

Question

所以我一直在学习反应，我想做一个基本的萤火虫实例。我现在的设置是在我的index.html中有一个容器div，并让我所有的通过这个div呈现。我目前的尝试和我用它展示的代码都是在一个吞咽和浏览器化的环境中进行的，但我也在玩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错误。有人有反应和火药的经验吗？我在reactfire文档中看到，它是从firebase绑定到我的站点的一种方式，对我来说，做一个只读的萤火虫是可以的。就像我说的，我很灵活，所有这些东西对我来说都是新的。

Answer 1

从Michael提供的链接。

问题是，在React呈现组件之前，您正在尝试引用DOM元素。

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

通过将此代码移动到componentDidMount()中，它将在构造了CodeMirror DOM元素之后运行，并且您将能够引用DOM节点。您可能还会发现使用反应参考属性而不是document.getElementById()更容易。

Answer 2

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

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

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

希望这会有所帮助。