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

Question

所以我的项目正在使用 React with Webpacker on Rails 5。如果我通过 link_to 帮助器转到页面，看起来像 javascriptdocument.addEventListener('turbolinks:load') 不工作。

这是我的根 Controller 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 根本没有运行。除非我刷新它正在正确加载的页面。

我错过了什么吗？如何让 .jsx 代码通过 link_to 助手运行？

谢谢!

Answer 1

我认为它正在按照您的指示去做。它添加了一个事件监听器(但这发生在 turbolinks:load 事件之后)。因此它仅在您导航到另一个页面后执行，这将是您添加监听器后的第一个 turbolinks:load 事件。

如果您将它放在那个页面上，并且希望它在页面加载时执行，请不要将它放在事件监听器中如何使用 on event trigger

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