当我通过Rails 5上的React Webpacker来自link_to帮助程序时，如何使document.addEventListener'turbolinks：load'运行？

Question

所以，我的项目使用与on Rails的5 Webpacker反应。如果我去通过页面link_to助手好像下的javascript 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')
  )
})

这是我的这条路线的html模板

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

  </div>
</div>

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

这是我另一页的链接。

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

好像console.log('root react')正在正确运行，但是ReactDOM.render根本没有运行。 除非我刷新页面，否则它加载正确。

我想念什么吗？ 我该如何通过link_to helper运行.jsx代码？

谢谢！

Answer 1

我认为它正在执行您要执行的操作。 它添加了一个事件监听器（但是会在turbolinks:load事件之后发生）。 因此，它仅在导航到另一个页面后才执行，这将是添加侦听器后的第一个turbolinks:load事件。

如果将其放在该页面上，并且希望它在页面加载时执行，请不要将其放在事件侦听器中如何on event trigger

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