当我通过 Rails 5 上的 react Webpacker 从link_to助手来时，如何使 document.addEventListener 'turbolinks:load'运行？

Question

，所以我的项目正在使用Rails 5上的WebPacker进行React。如果我访问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根本没有运行。除非我刷新页面正确加载。

我想念什么吗？如何使.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')
  )
});

Answer 2

嘿，这也发生在我身上。

对于其他任何人，我都将我的反应代码与其他刺激代码捆绑在一起。添加文档活动听众还为时过早。

我将React代码与主捆绑包分开，然后将其加载到网站的页脚中。现在我可以这样做：

import * as React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App"
const initReactPage = () => {
    const element = document.getElementById('js-robot-ui')
    if(element) {
        const root = ReactDOM.createRoot(element)
        const config = JSON.parse(element.dataset.config)
        root.render(<App config={config}/>)
    }
}
document.addEventListener("turbolinks:load", initReactPage)
initReactPage()