Question

我正在使用react-rails gem并有两个模型：<div class="thumbnail"> <img data-src="cabin.png" src="cabin.png" alt="" /> </div> $(".pictures .thumbnail").mouseenter ( function () { $(this).find('img').attr("src","glass.png"); }); $(".pictures .thumbnail").mouseleave ( function () { var $this = $(this); $this.find('img').attr("src", $this.find('img').attr("data-src"); });和Message。用户has_many：消息。

在我的User中，我想向该用户展示该消息。在常规erb中，它只是message.js.jsx。我将如何在<%= message.user.name %>组件中执行此操作？

Answer 1

您可以将您的组件重命名为message.js.jsx.erb并在其中使用ERB，但只有在Rails启动时才会编译一次。

更多的React-ish方法是AJAX在componentDidMount（或商店，如果使用Flux）中加载用户数据。

<强> message.js.jsx

getInitialState: function() {
  return { user: { name: '' } };
},

componentDidMount: function() {
  $.getJSON('/users/'+ this.props.id +'.json', function(userData) {
    if (this.isMounted()) {
      this.setState({ user: userData })
    }
  });
},

您可以创建一个Rails端点，将userData作为JSON返回：

<强> users_controller.rb

def show
  @user = User.find(params[:id])
  respond_to do |format|
    format.html # default html response
    format.json { render json: @user.to_json(only: [:id, :name]) }
  end
end

有关详细信息，请参阅Facebook's page on this

Answer 2

我同意Unixmonkey的反应方式。你也可以采取更多方式。

@user = JSON.parse user.to_json(include: [:messages], only: [:id, :name])

除了使用componentDidMount使用jbuilder命中JSON端点，如果要动态更新，也可以暂停。

componentDidMount: function() {
  $.getJSON('/users/'+ this.props.id +'.json', function(user) {
    if (this.isMounted()) {
      this.setState({ user: user })
    }
  });
},

用户视图下的show.json.jbuilder看起来像这样：

  json.id @user.id
  json.name @user.name
  json.messages @user.messages do |message|
    json.id message.id
    json.content message.content
    json.created_at message.created_at
  end

使用React Rails显示关联的模型数据

2 个答案: