1

kaminari gem で react-rails を使用しようとしています。以下のコードは、ページネーションを使用して管理者ページを作成する役割を果たします。ページネーションはカミナリ メソッドです。

#app/views/dashboard/admins/_admins.html.erb
<div id="admins_component">
  <%= react_component 'Admins', {data: admins} %>
</div>
<%= paginate admins, :remote => true %>

remote=true でリクエストを発行すると、この全体が再描画され、次のコードによってレスポンスが生成されます。

#app/views/dashboard/admins/index.js.erb
<% if @admins.present? %>
$("#admin_wrapper").html("<%= escape_javascript(render partial: 'admins', locals: { admins: @admins } ) %>");
React.render("Admins", "#admins_component"); //How to make this work???
<% end %>

ajax リクエストの後、レスポンスが正しく生成され、次のように ReactComponent もページの HTML に作成されます。

<div data-react-class="Admins" data-react-props="{"data":[{"id":26,"email":"okokoko@kok.com","created_at":"2016-03-16T09:10:48.220Z","updated_at":"2016-03-16T09:10:48.220Z"}]}"></div>

しかし問題は、コンポーネントがレンダリング/マウントされていないことです。コンソールからコンポーネントを手動でマウントしようとしましたが、正しく行ったかどうかはわかりません。

さらに、クロムの反応拡張機能は、次のページのリクエストが発生した後、管理コンポーネントの以前の状態を表示します。 ここに画像の説明を入力

目的は、ページネーション リンクをクリックして、以下の赤いボックスの html を置き換えることです。ここに画像の説明を入力

ページネーション リンクをクリックする前後にコンソールで Admin.prototype を実行すると、次の出力が得られます。 ここに画像の説明を入力

4

1 に答える 1

4

react-rails属性に基づいてコンポーネントをマウントするためのいくつかのヘルパーが含まれdata-react-classています。data-react-propsgem はこれらのヘルパーを使用してコンポーネントをマウントしますが、それらを自分で呼び出すこともできます。

次の行を削除する必要があります。

React.render("Admins", "#admins_component"); //How to make this work???

そしてそれを次のように置き換えます：

// Find any divs with `data-react-class` and mount them 
ReactRailsUJS.mountComponents()

その関数はいつでも呼び出すことができます。コンポーネントが既にマウントされている場合でも、再レンダリングされますが、何も台無しにはなりません!

のすべてreact-railsのヘルパーは、次のreact_ujs*ファイルで確認できます。

https://github.com/reactjs/react-rails/tree/master/lib/assets/javascripts

于 2016-03-16T20:43:21.930 に答える