3

私がしたいこと ？

Railsモデルのreact.jsコンポーネントを含むRailsビューファイルデータを表示したくありません。

私は何を持っていますか？

これらの宝石をインストールしました

rails-admin
react-rails

私がしたこと ？

新しい Rails プロジェクトを作成しました。react-rails gem をインストールし、rails-admin gem をインストールして、次のタイプの新しいコントローラーを作成しました

rails g scaffold 投稿タイトル:文字列 本文:テキスト

そして、レール管理者の投稿から追加できます。すべて問題ありません。

私のコントローラーは次のようになります:

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

ここに私のviews/posts/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

ここに私の反応コンポーネントファイル 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 にデータを取得できません。どうやってやるの？私が立ち往生していて、インターネット上で理解できるものが何も見つからないのを助けてください

4

2 に答える 2

1

私はそれを機能させるために3つの変更を加えました：

  1. index.html.erb

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

  2. views/posts/index.json.jbuilder ファイル

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

    ドキュメントの指示に従って; すなわち。「JSONが配列ではなく、文字列化されたハッシュであることを確認してください」。

  3. PostList コンポーネントのレンダリング関数の JSON.parse 関数を削除して、次のようにします。

    var PostList = React.createClass({

   render: function() {
      return (
         <div>
           {this.props.posts.map(function(post) {
              return <Post key={post.id} {... post}  />;
            })}
         </div>
       );
   }
});
于 2016-05-16T15:39:39.837 に答える