我如何使document.addEventListener'turbolinks：加載'運行時，我通過在Rails 5上的反應Webpacker來自link_to helper？

Question

所以我的項目是使用Rails 5上的Webpacker進行反應。 如果我通過link_to去頁面助手似乎是在 document.addEventListener('turbolinks:load')不工作。

這是我的根控制器insurance_form_container.jsx

import React from 'react' 
import ReactDOM from 'react-dom' 
import StartForm from './insurance_form/start_form' 

console.log('root react') 

document.addEventListener('turbolinks:load',function() { 
    ReactDOM.render(
    <StartForm />, 
    document.getElementById('start-form-index-container') 
) 
}) 

這是我這條路線

<div class="container"> 
    <div id="start-form-index-container"> 

    </div> 
</div> 

<%= content_for(:footer) do %> 
    <%= javascript_pack_tag('insurance_form_container') %> 
<% end %> 

HTML模板這是我的鏈接形成的其他頁面。

<%= link_to users_insurance_form_start_path, 
      class: 'btn btn-lg btn-success btn-primary-green' do %> 
    ดำเนินการต่อ 
<% end %> 

好像console.log('root react')運行正常，但ReactDOM.render沒有運行在所有。 除非我刷新頁面，它正確加載。

我錯過了什麼？ 如何使.jsx代碼通過link_to助手運行？

謝謝！

Answer 1

我認爲這是在做你正在告訴它做的事情。它添加了一個Event Listener（但發生在turbolinks:load事件之後）。所以它只會在您導航到另一個頁面後執行，在您添加偵聽器之後這將是第一個turbolinks:load事件。

如果你是把它在該網頁上，你希望它執行的頁面加載，不要把它的事件偵聽器內有關使用on event trigger

document.on("turbolinks:load", function() { 
    ReactDOM.render(
    <StartForm />, 
    document.getElementById('start-form-index-container') 
) 
});