Question

我已经开始使用Rails后端学习React.js，现在我已经完成了向用户展示的简单任务。代码如下：

的application.js ：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .

components.js ：

//= require_tree ./components

index.html.erb ：

<%= react_component 'Users', { data: @users } %>

资产/ Javascript角/组件/ users.js.coffee ：

@Users = React.createClass
    getInitialState: ->
        users: @props.data
    getDefaultProps: ->
        users: []
    render: ->
        React.DOM.div null,
            className: 'users'
            for user in @state.users

资产/ Javascript角/组件/ user.js.coffee ：

@User = React.createClass
    render: ->
        React.DOM.img null, @props.user.avatar
        React.DOM.p null, @props.user.username

此代码返回ExecJS::RuntimeError in Welcome#index，详细信息如下：

SyntaxError: [stdin]:9:28: unexpected indentation

Extracted source (around line #6):

<head>
    <title>Testingapp</title>
    <!-- the line #6 goes below, stylesheet_link_tag -->
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>

我试图删除

//= require tree .

来自 application.js 以及 components.js 我已更改

//= require tree ./components

行到

//= require components

然后错误就消失了，但React不起作用。

Answer 1

for user in @state.users行失败。您可以尝试在className: 'users'之后添加逗号，因为React元素接受子节点作为最后一个参数，这就是您可能要做的事情。

你应该得到这样的东西：

render: ->
    React.DOM.div null,
        className: 'users',
        (@User(user: user, key: user.username) for user in users)

作为旁注，请考虑关闭react-rails中的服务器端呈现，直到您的代码在浏览器中运行。这将使调试变得更加容易。

使用React.js

1 个答案: