React.js与Rails模型的通信

Question

我想做什么?

我不想在我的rails视图文件中显示来自rails模型的react.js组件的数据。

我有什么?

我安装了这些宝石

rails-admin
react-rails 

我做了什么?

我创建了一个新的rails项目。我安装了react rails创业板和rails-admin创业板创建了具有以下类型的新控制器

rails g脚手架文章标题:string body:text

我可以从rails管理员的帖子中添加所有的内容都可以。

我的控制器看起来：

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  # GET /posts.json
  def index
    @posts = Post.all
  end

  # GET /posts/1
  # GET /posts/1.json
  def show
    @post = Post.find(params[:id])
  end

  # GET /posts/new
  def new
    @post = Post.new
  end 

这是我的视图/posts/index.html.erb文件

<%= react_component('PostList', {name: raw(render(template: 'posts/index', formats: :json)) }) %>

以下是视图/posts/index.json.jBuilder文件

json.array!(@posts) do |post|
  json.extract! post, :id, :title, :body
  json.url post_url(post, format: :json)
end

以下是视图/posts/show.json.jBuilder文件

json.extract! @post, :id, :title, :body, :created_at, :updated_at

这是我的react组件文件assets/javascripts/components/post_list.js.jsx

var PostList = React.createClass({

  render: function() {  
    return (
      <div>
        {JSON.parse(this.props.posts).map(function(post) { 
          return <Post key={post.id} {... post}  />;
        })}
      </div>
      );
  }
});

所以我不明白我哪里错了。我无法从json获得数据到index.html.erb。我怎么能这么做？请帮帮我，我在网上找不到任何可以理解的东西

Answer 1

我做了三个改变来使它发挥作用：

1. index.html.erb <%= react_component('PostList'，呈现(模板：‘post/index’，格式：:json) %>
2. 视图/posts/index.json.jBuilder文件 Json.posts(@post) do \post\\ json.extract！post，:id，:title，:body json.url post_url(post，format：:json) end 按照文档中的指示；“确保您的JSON是一个字符串散列，而不是数组”。
3. 删除JSON.parse组件呈现函数中的PostList函数，如下所示： 变量PostList = React.createClass({呈现:函数()){返回({this.props.posts.map(函数)){返回；} })；} )；

Answer 2

这种方法是可行的。

index.html.erb

<% @news.order("id DESC").each do |news|  %>
                <%= react_component('News', { :news => news }) %>
                <% end %>

news.js.jsx

var News = React.createClass({

 displayName: 'News',

  render: function() {
    return (
           <div>
             <h4>{this.props.news.title}</h4>
             <p>{this.props.news.body}</p>
           </div>
    );
   }
 }); 

index.json.jbuilder

json.array!(@news) do |news|
  json.extract! news, :id, :title, :body
  json.url news_url(news, format: :json)
end