React 组件未在 Rails 视图中呈现 activerecord 关系答案

【问题标题】：React component is not rendering activerecord relation in Rails viewReact 组件未在 Rails 视图中呈现 activerecord 关系
【发布时间】：2015-09-11 20:12:46
【问题描述】：

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

我安装了 react-rails gem：

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

并遵循建议的安装程序。

我已经搭建了故事模型的脚手架，并在我的 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 实例似乎没有正确解析为 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 之后加载反应文件。并用这段代码解决

#                   -- file: application.js

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

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

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

【问题讨论】：

标签： ruby-on-rails reactjs components

【解决方案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

【讨论】：