React-Rails-问题入门 [英] React-Rails - problems getting started
问题描述
我试图弄清楚如何在我的Rails 5 gem中使用react-rails.
I'm trying to figure out how to use react-rails with my Rails 5 gem.
At the moment, I'm trying to follow the tutorial in this post. https://medium.com/technically-speaking/isomorphic-reactjs-app-with-ruby-on-rails-part-1-server-side-rendering-8438bbb1ea1c#.iwd44r60v
我目前无法呈现该页面.我使用app_roles而不是帖子，但否则，我已按照本教程中显示的步骤进行操作.
I can't get the page to render at present. I use app_roles instead of posts, but otherwise I've followed the steps shown in the tutorial.
我的app/assets/javascripts/components文件夹中有两个文件.
I have two files in my app/assets/javascripts/components folder.
app_role.js.jsx具有:
app_role.js.jsx has:
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具有:
app_roles_list.js.jsx has:
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文件中呈现该文件时:
When I try to render this in my app_roles/index.html.erb file with:
<%= 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
我不明白此错误消息.我已经阅读了一些帖子描述了一个问题，其中return方法有两个要返回的元素.我尝试完全删除div h2标签，并将两个返回的元素放入数组中，但这也不起作用.
I don't understand this error message. I've read some posts describing a problem where the return method has two elements being returned. I tried removing the div h2 tag altogether and putting the two returned elements in an array, but that didn't work either.
我还阅读了一些帖子，这些帖子描述了配置babel的问题.我不遵循这些评论的要旨.在我的配置development.rb中，我有:
I have also read posts describing problems configuring babel. I don't follow the gist of those comments. In my config development.rb, I have:
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
}
我不确定应该在optional:字段中写什么.我以为react-rails会给我一些默认设置，这些默认设置会自动起作用.
I'm not sure what I'm supposed to write in the optional: field. I assumed react-rails would give me some kind of default settings that would automatically work.
我也尝试添加:
/** @jsx React.DOM */
/** @jsx React.DOM */
在每个组件文件的顶部.尽管这对问题没有影响.
to the top of each of the component files. Although that makes no difference to the problem.
我还尝试将其添加到config/application.rb
I also tried adding this to config/application.rb
config.react.jsx_transformer_class = React::JSX::JSXTransformer
那也没有任何改变.
我也尝试在命令行中添加它:
I also tried adding this on my command line:
npm install --save-dev babel-preset-react
对这个问题没有影响.
有人可以看到要加载此页面我需要做什么吗?
Can anyone see what I need to do to get this page to load?
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 .
推荐答案
要解决的问题:
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状态变量(即
You are copying the initialAppRoles prop into the posts state variable (which is mostly an anti-pattern), but then you expect this.state.app_roles which is never set.
您应该在此处删除整个getInitialState函数并直接使用:
You should just delete the whole getInitialState function here and directly use:
var posts = this.props.initialAppRoles.map(function(app_role) {
return <AppRole key={app_role.id} app_role={app_role} />;
});
要修复的第二个错误:您正在render函数中创建posts数组，但随后您的返回中没有设置app_roles.更正以下内容:
Second bug to fix: you are creating an array of posts in the render function, but then you have app_roles in your return which is not set. Correct that to have:
return (
<div className="label">
{posts}
</div>
);
我将粘贴的代码复制到我的Rails设置(使用react-rails)中，并且可以启用和禁用预渲染.
I copied pasted your code into my Rails setup (which uses react-rails) and it worked with prerendering on and off.
在旁注中，我强烈建议每个.js.jsx文件包含一个组件，并使用带下划线的组件名称作为其名称.它将使将来更容易找到东西.
On a side note, I strongly recommend having one component per .js.jsx file with the underscore cased name of the component as its name. It'll make things easier to find in the future.
这篇关于React-Rails-问题入门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
