Question

我正在尝试反应和Rails。我有一个非常简单的rails应用程序，其中一个名为“Story”。

我安装了react-rails gem：

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

并按照建议的安装程序进行操作。

我已经将故事模型搭建了脚手架，并将“新”方法设置为我的routes.rb文件。一切正常。

我在storycontroller中添加了@stories实例到我的'new'方法，该方法包含数据库中的所有记录：

# 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" }) %>

然后正确呈现'title'和'description'。

似乎我视图中的@stories实例未正确解析为react组件。然后我用

尝试了旧式的方式

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

这样就行了。所以@stories实例没问题。它包含所有记录，可从new.htm.erb文件访问。

我在application.js中的turbolinks之后加载react文件。并使用此代码确定

#                   -- file: application.js

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

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

我在互联网上找不到答案，所以我希望有人可以帮助我第一次尝试在轨道环境中运行。

Answer 1

如果@stories是一个数组并像这样传递

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

然后该数组将在名为data的道具上可用，即。this.props.data将成为故事的数组。这里没有神奇的解包，这将允许您访问每个故障属性。

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

允许您像this.props.story.title那样访问您的数据，并为您在数组中的每个故事渲染一个div

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

1 个答案: