如何使用來自npm的反應組件在導軌中

Question

我是新的反應，我按照這篇文章https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers 在rails應用程序中使用反應，一切都很好。但後來我想包括在records.html頁summernote（所見即所得的html編輯器）。我發現這個npm模塊react-summernote並且不能編輯器工作。

這是我的代碼（試行1）：

• 的application.js

var ReactSummernote= window.ReactSummernote = global.ReactSummernote = require('react-summernote'); 

• index.html.erb

<%= react_component 'ReactSummernote'%> 

這是我的代碼（嘗試2）：

• summernote.js.coffee

@RichTextEditor = React.createClass 
    render: -> 
    React.createElement ReactSummernote 

• index.html.erb

<%= react_component 'RichTextEditor'%> 

，並得到這個錯誤

react.self-e3251ec ... .js？body = 1：1285警告：React.createElement：類型不應該爲null，undefined，boolean或number。它應該是一個字符串（用於DOM元素）或ReactClass（用於複合組件）。檢查Constructor的渲染方法。

Answer 1

有些事情值得檢查;

我假設您的節點軟件包正在安裝到/node_modules/*。確保將這些軟件包添加到您的資產管道中。我用browserify來實現這一點。

檢查您的瀏覽器控制檯是否正在設置變量（只需鍵入ReactSummernote。如果導入正確，結果應該是函數，如果有問題，結果應該是未定義的）。

如果你已經得到這麼多並仍然卡住，我會建議在不使用react-rails的情況下觸發渲染。通過vanilla javascript呈現頁面的組件是很容易的，如果它是導致問題的react-rails gem，那麼這將很容易地用這樣的東西導航;

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
);