1

所以我一直在学习 react，并想做一个基本的 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 错误。任何人都对 react 和 firepad 有任何经验吗？我在 reactfire 文档中读到，这是从 firebase 绑定到我的网站的一种方式，对于我来说，制作一个只读的 firepad 就可以了。就像我说的，我很灵活所有这些东西对我来说都是新的。

4

2 回答 2

2

从迈克尔提供的链接。

问题是你试图在 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().

于 2016-01-08T04:51:34.740 回答
0

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

由于firepad需要ace全局存在，因此在导入之前将大括号分配给 global var like（不是最好的方法，但有效）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编辑器也是如此。

希望这会有所帮助。

于 2017-12-08T05:19:58.150 回答