レールでnpmの反応成分をどのように使用するのですか

Question

私は反応が新しく、この記事に従います。https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers レールアプリで反応しても問題ありません。しかし、後でrecords.htmlページsummernote（WYSIWYG htmlエディタ）にインクルードしたいと思っていました。私はこのnpmモジュールreact-summernoteを見つけました。エディタの作業はできません。

これは私のコード（1を試してみてください）である：これは私です

<%= react_component 'ReactSummernote'%> 

index.html.erb

• application.js

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

• コード（試してください）：
  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：typeはnull、未定義、ブール値、または数値であってはなりません。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。レンダリング方法がConstructorであることを確認します。

Answer 1

チェックする価値のあるもの。

あなたのノードパッケージが/node_modules/*にインストールされていると仮定しています。これらのパッケージがアセットパイプラインに追加されていることを確認してください。私はこれを達成するためにbrowserifyを使用しました。

変数が設定されているかどうかは、ブラウザのコンソールで確認してください（ReactSummernoteと入力してください）。正しくインポートされた場合は関数になり、問題がある場合は未定義になります。

これまでのところ、まだまだ立ち往生している場合は、リアレイルを使わずにレンダリングをトリガすることをお勧めします。あなたのページのコンポーネントをバニラのjavascriptでレンダリングするのは簡単ですが、それが問題を引き起こしているリアクションレールの宝石であれば、このようなことで簡単にナビゲートできます。

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