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

Question

所以我一直在学习 React，并想制作一个基本的 firepad 实例。我当前的设置是在我的 index.html 中有一个容器 div，并让我的所有 React 组件通过该 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 包移动到仅将 2 个所需的 codemirror 文件链接到我的 html。然后它给了我一个关于不能接受未定义的 .replaceChild 的错误。然后我尝试将所有依赖文件移到我的 index.html，但仍然有相同的 .replaceChild 错误。有人有反应和火垫的经验吗？我在 reactfire 文档中读到，这是从 firebase 绑定到我的网站的一种方式，对于我来说，制作一个只读的 firepad 就可以了。就像我说的，我很灵活所有这些东西对我来说都是新的。

Answer 1

来自 Michael 提供的 link。

The problem is that you are trying to reference a DOM element before React has rendered your component.

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

By moving this code into componentDidMount(), it runs after the CodeMirror DOM element has been constructed and you'll be able to reference the DOM node. You will also probably find it easier to use the React ref attribute instead of 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 编辑器也是如此。

希望这会有所帮助。

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

How can I make add firepad to my reactjs project?

javascript

reactjs

firebase

firepad