React组件在Rails视图中没有呈现activerecord关系

我尝试了反应和Rails。我有一个叫做“故事”的模型，有一个非常简单的rails应用程序。React组件在Rails视图中没有呈现activerecord关系

我安装了反应护栏宝石：

gem 'react-rails', '~> 1.0'

，并遵循建议的安装过程。

我脚手架故事模型，并创建了'new'方法，以root用于我的routes.rb文件。一切正常。

我在storiescontroller持有的所有记录从数据库中增加了一个@stories例如我的“新”方法：

# GET /stories/new -- file: stories_controller.rb 
    def new 
    @stories = Story.all 
    @story = Story.new 
end

在我看来，我加入这行代码

#     -- file: new.html.erb 
<%= react_component('Story', { :data => @stories }) %>

，在我的JavaScript文件我有这样的代码：

#     -- file:assets/javascripts/components/story.js.jsx 
var Story = React.createClass({ 

displayName: 'Story', 

propTypes: { 
    title: React.PropTypes.string, 
    description: React.PropTypes.node 
    }, 


    render: function() { 
    return (
      <div> 
      <div>Title: {this.props.title}</div> 
      <div>Description: {this.props.description}</div> 
      </div> 
    ); 
    } 
});

我想这应该工作。但事实并非如此。当我用这个替换视图页中的代码时：

<%= react_component('Story', { :title => "my title", :description=> "my description" }) %>

然后'标题'和'描述'都正确呈现。

似乎我的视图中的@stories实例没有正确解析到反应组件。然后我尝试了老式的方式

<% @stories.each do |story| %> 
    <div class="panel"> 
     <h3><%= story.title %></h3> 
     <p><%= story.description %></p> 
    </div> 
    <% end %>

并且工作正常。所以@stories实例没有问题。它保存所有记录并可从new.htm.erb文件访问。

我加载了application.js中turbolinks之后的反应文件。而与此代码

#     -- file: application.js 

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

$(function(){ $(document).foundation(); });

我不能在互联网上找到了答案，所以我希望有人能帮助我与我的第一次尝试让反应在我的轨道环境中运行解决。

来源

2015-09-11 MDekker

如果@stories是一个数组，并通过这样的

<%= react_component('Story', { :data => @stories }) %>

那么阵列将可在名为data即一个道具，this.props.data将是故事的阵列。这里没有魔术拆包，这将允许您访问每个Storys属性。

<% @stories.each do |story| %> 
    <%= react_component('Story', { :story => story }) %> 
<% end %>

将允许您访问您的数据，像这样this.props.story.title，也呈现一个div为您的阵列中有每个故事

来源

2015-09-11 21:57:15

React组件在Rails视图中没有呈现activerecord关系

回答

相关问题