ruby-on-rails 当我通过react Webpacker on Rails5从link_to helper返回时，如何让document.addEventListener 'turbolinks：load'运行？

h22fl7wq 于 2023-03-13 发布在 Ruby

关注(0)|答案(2)|浏览(123)

因此，我的项目是使用React与Webpacker的Rails 5。如果我去的页面下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助手运行？
谢谢！

ruby-on-rails

来源：https://stackoverflow.com/questions/46253041/how-can-i-make-document-addeventlistener-turbolinksload-run-when-i-came-from

2条答案

按热度按时间

xzabzqsa1#

我认为它正在做你告诉它要做的事情。它添加了一个事件侦听器（但那发生在turbolinks:load事件之后）。所以它只在你导航到另一个页面之后执行，这将是你添加侦听器之后的第一个turbolinks:load事件。
如果要将其放在该页面上，并且希望它在页面加载时执行，请不要将其放在事件侦听器中使用on event trigger如何

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

赞(0）回复(0）举报 2023-03-13

guicsvcw2#

嘿我也遇到过这种事。
对于其他人，我将react代码与其他刺激代码沿着捆绑在head中，这对于添加文档事件侦听器来说还为时过早。
我将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()

赞(0）回复(0）举报 2023-03-13

我来回答

ruby-on-rails 当我通过react Webpacker on Rails5从link_to helper返回时，如何让document.addEventListener 'turbolinks：load'运行？

2条答案

相关问题

热门标签

最新问答