我如何使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') 
) 
});