Question

所以我一直在学习反应，并希望制作一个基本的firepad实例。我当前的设置是在我的index.html中有一个容器div，并且我的所有反应组件都通过该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文件。尽管在Chrome的开发工具中正确定义了CodeMirror，但我将其从要求npm包转移到仅将2个所需的codemirror文件链接到我的html。然后它给了我一个关于无法使用.replaceChild未定义的错误。然后我尝试将所有依赖项文件移动到我的index.html，但仍然有相同的.replaceChild错误。任何人有反应和firepad的经验吗？我在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节点。您也可能会发现使用React ref attribute代替document.getElementById()更容易。

Answer 2

使用这些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

与pqr.txt编辑器类似。

希望，这会有所帮助。

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

2 个答案: