React.js 和 Rails 模型之间的通信答案

【问题标题】：Communication between React.js and Rails ModelReact.js 和 Rails 模型之间的通信
【发布时间】：2016-09-11 22:08:06
【问题描述】：

我想做什么？

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

我有什么？

我已经安装了这些 gem

rails-admin
react-rails

我做了什么？

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

rails g 脚手架帖子标题：字符串正文：文本

我可以从 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

这是我的意见/帖子/index.html.erb 文件

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

这里是views/posts/index.json.jbuilder文件

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

这里是views/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。我怎样才能做到这一点？请帮助我陷入困境，我在互联网上找不到任何可以理解的内容

【问题讨论】：

标签： ruby-on-rails json reactjs react-rails

【解决方案1】：

我进行了三处更改以使其正常工作：

index.html.erb

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

views/posts/index.json.jbuilder 文件
```
json.posts(@posts) do |post|
  json.extract! post, :id, :title, :body
  json.url post_url(post, format: :json)
end
```
按照documentation中的说明； IE。 “确保您的 JSON 是字符串化哈希，而不是数组”。

去掉PostList组件渲染函数中的JSON.parse函数，改为：

var PostList = React.createClass({

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

【讨论】：

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

【讨论】：