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 вместо сообщений, но в остальном я выполнил шаги, показанные в учебнике.

У меня есть два файла в папке app/assets/javascripts/components.

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, описывающий проблему, в которой метод return возвращает два элемента. Я попытался удалить тег div h2 вообще и поместить два возвращенных элемента в массив, но это тоже не сработало.

Я также прочитал сообщения, описывающие проблемы настройки babel. Я не следую сути этих комментариев. В моей конфигурации 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 */

к началу каждого из файлов компонентов. Хотя это не имеет никакого отношения к проблеме.

Я также попытался добавить это к конфигурации/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 трансформируется, но AppRole не потому, что проблема началась с

<div className="h2"> 

удалить

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

и посмотреть, что происходит. Если это поможет проверка 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> 
     ); 
    } 
}); 

Вы копируете initialAppRoles опору в posts переменной состояния (которое mostly an anti-pattern) , но тогда вы ожидаете this.state.app_roles, который никогда не устанавливается.

Вы должны просто удалить всю getInitialState функции здесь и непосредственно использовать:

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

Второй ошибки исправить: вы создаете массив posts в функции render, но тогда вы должны app_roles в возвращении, который не задано. Исправьте, что есть:

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

Я скопировал вставил свой код в моей установке Rails (который использует реагирующие-рельсы), и она работала с предварительной визуализации и выключаться.

На стороне примечания, я настоятельно рекомендую иметь один компонент в файле .js.jsx с подстрочным именем имени компонента в качестве имени. Это облегчит поиск в будущем.