我如何使我的reactjs项目添加firepad？ [英] How can I make add firepad to my reactjs project?

问题描述

所以我一直在学习反应，并想做一个基本的触发板实例。我目前的设置是在我的index.html中有一个容器div，并通过该div使我的所有反应组件呈现。我目前的尝试和代码，我已经在一个吞咽和browserify的环境，但我也玩弄ES6和webpack。所以我很灵活地学习这个工作。以下是代码：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' b $ b，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！'}）;
$ b $ var WritePage = React.createClass（{
render：function（）{
return（
< div>
< div id = firepad>< / div>
< / div>
）;
}
}）;

module.exports = WritePage;

我得到的第一个错误是找不到codemirror.js文件。尽管CodeMirror在Chrome的开发工具中被正确的定义，但是我将它从需要npm包转移到只需将两个需要的codemirror文件链接到我的html。然后，它给了我一个错误，关于不能采取未定义的.replaceChild。然后，我试着将所有的依赖文件移到我的index.html，但仍然有相同的.replaceChild错误。任何人有任何反应和firepad的经验？我在reactfire文档中看到，这是从firebase绑定到我的网站的一种方式，对于我的情况，只能使用只读触发板就可以。就像我说的，我很灵活，所有这些东西对我来说都是新鲜的。

/ p>

问题在于，您正在尝试在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（）。

So I've been learning react, and wanted to make a basic firepad instance. My current setup is having one container div in my index.html, and having all of my react components rendering through that div. My current attempts and the code I'm showing with this have been in an environment with gulp and browserify, but I'm also playing around with ES6 and webpack. So I'm pretty flexible about getting this working as I learn. Here's the code:

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

The first error I was getting was that it couldn't find the codemirror.js file. Although CodeMirror was being correctly defined in Chrome's dev tools, I moved that from requiring the npm package to just linking the 2 needed codemirror files to my html. It then gave me an error about not being able to take .replaceChild of undefined. I then tried moving all of the dependency files over to my index.html, but still had the same .replaceChild error. Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my case making a read-only firepad would be fine. Like I said, I'm flexible all of this stuff is new to me.

解决方案

From the link that Michael provided.

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().

这篇关于我如何使我的reactjs项目添加firepad？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！