Javascript 如何将firepad添加到我的reactjs项目中？

所以我一直在学习react，想制作一个基本的firepad实例。我当前的设置是在index.html中有一个container 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;

“使用严格的”
var React=require（'React'）
，Firebase=require（'Firebase'）
，fbRoot='myURL'
，CodeMirror=require（'CodeMirror'））
，Firepad=require（'Firepad'））
，firepadRef=新Firebase（fbRoot+‘session/’）
，mycodemiror=CodeMirror（document.getElementById（'firepad'），{lineWrapping:true}）
，myFirePad=Firepad.fromCodeMirror（firepadRef，MyDeMirror，{richTextShortcuts:true，richTextToolbar:true，defaultText:'Hello，World！'}）；
var WritePage=React.createClass({
render:function（）{
返回(
);
}
});
module.exports=WritePage；

---

我遇到的第一个错误是找不到codemirror.js文件。虽然在Chrome的开发工具中正确定义了CodeMirror，但我将其从需要npm包转移到只将所需的2个CodeMirror文件链接到我的html。然后，它给了我一个错误，无法获取未定义的.replaceChild。然后我尝试将所有依赖项文件移到我的index.html，但仍然出现相同的.replaceChild错误。有人对react和firepad有经验吗？我在reactfire文档中读到，它是从firebase到我的站点的单向绑定，对于我来说，制作只读firepad就可以了。就像我说的，我很灵活，所有这些东西对我来说都是新的。

来自Michael提供的链接

问题在于，您试图在React呈现组件之前引用DOM元素

通过将此代码移动到

componentDidMount（）

，它将在构建CodeMirror DOM元素之后运行，您将能够引用DOM节点。您可能还会发现使用而不是

document.getElementById（）

更容易

---

使用这些

npm包

-

brace

，

react ace

，

firebase

，

firead

由于

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);

类似地，对于

codemirr

编辑器

希望这能有所帮助。

此处交叉发布：

new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);