Связь между React.js и моделью Rails

Что я хочу сделать?

Я не хочу показывать на моих рельсах данные файлов просмотра с компонентом react.js из моих моделей рельсов.

Что у меня есть?

Я установил эти драгоценные камни

rails-admin
react-rails

Что я сделал?

Я создал новый проект рельсов. Я установил драгоценный камень react-rails, а драгоценный камень rails-admin создал новый контроллер со следующими типами

rails g scaffold Заголовок сообщения:string body:text

и я могу добавить из сообщений администратора рельсов, все в порядке.

мой контроллер выглядит так:

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

вот мои активы файла компонента реакции/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 reactjs json react-rails
person Cihan Zengin    schedule 16.05.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я сделал три изменения, чтобы заставить его работать:

  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. удалите функцию JSON.parse в функции рендеринга компонента PostList, чтобы это:

    var PostList = React.createClass({

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

arrow_upward
0
arrow_downward

этот метод работает.

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
person Cihan Zengin    schedule 16.05.2016