首页 文章

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

提问于
浏览 次
1

我正在尝试反应和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" }) %>

然后正确呈现' Headers '和'描述' .

似乎我的视图中的@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(); });

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

ruby-on-rails reactjs components

1 回答

  • 1

    如果 @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

    回复于

相关问题