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

Question

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

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

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

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

rails-admin 
react-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)) }) %> 

здесь просмотров/сообщений/index.json.jbuilder файл

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

здесь просмотров/сообщений/show.json.jbuilder файл

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

вот моя реакция компонентов файла активы/JavaScripts/компонентов/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', 
         render(template: 'posts/index', formats: :json) 
        ) 
   %> 
   

2. просмотров /posts/index.json.jbuilder файл

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

   согласно инструкции в documentation; то есть. «убедитесь, что ваш 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> 
        ); 
       } 
   }); 
   

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