3

所以我的项目是在 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根本没有运行。除非我刷新页面，否则它会正确加载。

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

谢谢！

4

1 回答 1

0

我认为它正在做你告诉它做的事情。它添加了一个事件侦听器（但发生在turbolinks:load事件之后）。所以它只在您导航到另一个页面后执行，这将是turbolinks:load您添加侦听器后的第一个事件。

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

document.on("turbolinks:load", function() {
  ReactDOM.render(
   <StartForm />,
   document.getElementById('start-form-index-container')
  )
});
于 2017-09-16T11:08:41.317 回答