React-Rails - 始める際の問題

Question

私はRails 5 gemで反応レールを使用する方法を理解しようとしています。

現時点では、私はこの記事のチュートリアルに従おうとしています。 https://medium.com/technically-speaking/isomorphic-reactjs-app-with-ruby-on-rails-part-1-server-side-rendering-8438bbb1ea1c#.iwd44r60v

現在レンダリングするページを取得できません。投稿の代わりにapp_rolesを使用しますが、それ以外の場合はチュートリアルの手順に従っています。

私のアプリ/アセット/ javascripts/componentsフォルダに2つのファイルがあります。

app_role.js.jsxがあります

var AppRole = React.createClass({ 
    render: function() { 
     return (
      <div className="h2"> 
       <AppRoleHeader app_role={this.props.app_role} /> 
       <AppRoleContent app_role={this.props.app_role} /> 
      </div> 
     ); 
    } 
}); 
var AppRoleHeader = React.createClass({ 
    render: function() { 
     return (
      <div className="label"> 
       <h2>{this.props.app_role.title}</h2> 
       <div className="label"> 
        By {this.props.app_role.title} – {this.props.app_role.created_at} 
       </div> 
      </div> 
     ); 
    } 
}); 

var AppRoleContent = React.createClass({ 
    render: function() { 
     return (
      <div className="label"> 
       {this.props.app_role.display_name} 
      </div> 
     ); 
    } 
}); 

app_roles_list.js.jsxがあります

var AppRolesList = React.createClass({ 
    getInitialState: function() { 
     return { posts: this.props.initialAppRoles }; 
    }, 

    render: function() { 
     var posts = this.state.app_roles.map(function(app_role) { 
      return <AppRole key={app_role.id} app_role={app_role} />; 
     }); 

     return (
      <div className="label"> 
       {app_roles} 
      </div> 
     ); 
    } 
}); 

私はと私のapp_roles/index.html.erbファイルにこれをレンダリングしてみてください：

<%= react_component('AppRolesList', 
        { initialAppRoles: @app_roles }, 
        { prerender: params[:noprerender].nil? }) %> 

私が言うエラーが出る：

を

ExecJS::RuntimeError at /app_roles 
/private/var/folders/75/70zm4s4j14q74tfqpjvh49s80000gp/T/execjs20161015-7497-1bhq2x0js:24066 
     return <div className="h2"> 
      ^

SyntaxError: Unexpected token < 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:373:25) 
    at Object.Module._extensions..js (module.js:416:10) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Function.Module.runMain (module.js:441:10) 
    at startup (node.js:139:18) 
    at node.js:974:3 

このエラーメッセージはわかりません。私はいくつかのpostsを読んで、戻りメソッドに2つの要素が返される問題を説明しています。私は、div h2タグを完全に削除して、2つの返された要素を配列に入れてみましたが、どちらもうまくいきませんでした。

また、ベルベルを設定する際の問題点についても説明しています。私はそれらのコメントの要点に従わない。私の設定development.rbで、私は持っています：

config.react.variant = :development 
    config.react.addons = true 
    config.react.jsx_transform_options = { 
    blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options 
    # optional: ["transformerName"], # pass extra babel options 
    whitelist: ["useStrict"] # even more options 
    } 

私はオプション：フィールドに書き込むはずです。私は反応レールが私に自動的に働く何らかの種類のデフォルト設定を与えるだろうと思った。

私も追加してみました：

/** @jsx React.DOM */

のコンポーネントファイルのそれぞれの先頭に。それは問題に何の差もないが。

また、私はどちらか、何も変更しないのconfig/application.rb

config.react.jsx_transformer_class = React::JSX::JSXTransformer 

にこれを追加してみました。それは、この問題には違いが行われていない

npm install --save-dev babel-preset-react 

：

は、私も自分のコマンドラインにこれ​​を追加してみました。

誰かがこのページを読み込むために必要なことを見ることはできますか？

Application.jsがあります

//= require jquery 
//= require jquery_ujs 
//= require tether 
//= require bootstrap-sprockets 
//= require turbolinks 
//= require react 
//= require react_ujs 
// require react_bootstrap 
//= require components 
//= require_tree . 

Answer 1

Hereあなたがその一例でレポを持っています。 AppRolesListが変換されるように見えますが、問題は

var posts = this.state.app_roles.map(function(app_role) { 
    return <AppRole key={app_role.id} app_role={app_role} />; 
}); 

を削除し、何が起こるか見

<div className="h2"> 

から始まったので、AppRoleではありません。それは、チェックcomponents.jsがファイルを助けている場合、それは次のようになります。修正するために、物事の

//= require_tree ./components 

Answer 2

カップル：

var AppRolesList = React.createClass({ 
    getInitialState: function() { 
     return { posts: this.props.initialAppRoles }; 
    }, 

    render: function() { 
     var posts = this.state.app_roles.map(function(app_role) { 
      return <AppRole key={app_role.id} app_role={app_role} />; 
     }); 

     return (
      <div className="label"> 
       {app_roles} 
      </div> 
     ); 
    } 
}); 

をあなたは（mostly an anti-patternです）posts状態変数にinitialAppRoles小道具をコピーしていますしかし、あなたは決して設定されていないthis.state.app_rolesを期待しています。

あなたはちょうどここに全体getInitialState機能を削除し、直接使用する必要があります。

var posts = this.props.initialAppRoles.map(function(app_role) { 
    return <AppRole key={app_role.id} app_role={app_role} />; 
}); 

修正するための第二のバグ：あなたはrender機能にpostsの配列を作成しているが、その後、あなたのリターンするapp_rolesを持っているが設定されていません。持っていることを修正：

return (
    <div className="label"> 
    {posts} 
    </div> 
); 

私は（レールを反応させる使用しています）私のRailsのセットアップにコードを貼り付け、それはオンとオフの事前レンダリングで働いていたコピー。

補足として、.js.jsxファイルごとに1つのコンポーネントを、そのコンポーネントのアンダースコアの名前をその名前として持つことを強くお勧めします。将来的に見つけやすくなります。