Question

我试图弄清楚如何在我的Rails 5 gem中使用react-rails。

目前，我正在尝试按照这篇文章中的教程进行操作。 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来描述返回方法返回两个元素的问题。我尝试完全删除div h2标签并将两个返回的元素放在一个数组中，但这也没有用。

我还阅读了描述配置babel的问题的帖子。我不遵循这些评论的要点。在我的config 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
  }

我不确定我应该在optional：字段中写什么。我假设react-rails会给我一些自动工作的默认设置。

我也尝试添加：

/ ** @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

要解决的问题：

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。{/ p>

您应该在此删除整个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设置（使用react-rails），它可以预先打开和关闭。

另外，我强烈建议每个.js.jsx文件使用一个组件，并以组件的下划线名称作为名称。它将来更容易找到。

React-Rails - 入门问题

1 个答案: