我该如何在我的reactjs项目中添加Firepad？

Question

因此，我一直在学习反应，并想制作一个基本的Firepad实例。 我当前的设置是在index.html中有一个容器div，并通过该div渲染所有我的react组件。 我目前的尝试和显示的代码是在具有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软件包转移到仅将2个所需的codemirror文件链接到我的html。 然后，它给了我一个关于无法使用未定义的.replaceChild的错误。 然后，我尝试将所有依赖项文件移到我的index.html，但是仍然出现相同的.replaceChild错误。 任何人对React和Firepad有任何经验吗？ 我在reactfire文档中读到，这是从Firebase绑定到我的网站的一种方式，对于我来说，制作只读Firepad会很好。 就像我说的那样，我很灵活，所有这些东西对我来说都是新的。

Answer 1

从迈克尔提供的链接。

问题是您正在尝试在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节点。 您可能还会发现使用React ref属性代替document.getElementById()更容易。

Answer 2

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

由于firepad需要ace才能在全局存在，因此在导入firepad之前将大括号分配给global var 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编辑器也是如此。

希望这会有所帮助。