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關係

回答

相關問題