Fatal编程技术网
  • javascript/
  • DOMContentLoaded在导航后不触发，但在使用javascript\u pack\u标记时在页面重新加载时触发

DOMContentLoaded在导航后不触发，但在使用javascript\u pack\u标记时在页面重新加载时触发

javascript ruby-on-rails reactjs dom webpack

DOMContentLoaded在导航后不触发，但在使用javascript\u pack\u标记时在页面重新加载时触发,javascript,ruby-on-rails,reactjs,dom,webpack,Javascript,Ruby On Rails,Reactjs,Dom,Webpack,我正在使用React和Webpacker处理Rails 6 rc1项目 我目前正在使用javascript\u pack\u标记在我的Rails应用程序中呈现React组件。我尽量不使用像react-rails这样的gem来简化事情 今天我发现了一个奇怪的行为，我的React组件在从链接导航到页面后不会呈现。但是，在重新加载页面时，会呈现我的组件 Gemfile： gem 'rails', '~> 6.0.0.rc1' gem 'pg', '>= 0.18', '< 2.0'

我正在使用React和Webpacker处理Rails 6 rc1项目

我目前正在使用
javascript\u pack\u标记
在我的Rails应用程序中呈现React组件。我尽量不使用像
react-rails
这样的gem来简化事情

今天我发现了一个奇怪的行为，我的React组件在从链接导航到页面后不会呈现。但是，在重新加载页面时，会呈现我的组件

Gemfile
：

gem 'rails', '~> 6.0.0.rc1'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.4.2', require: false
gem 'devise', '~>4.6'

group :development, :test do
  gem 'pry-byebug'
  gem 'rspec-rails', '~> 3.8'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

app/javascript/packs/application.js
：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap"
import "../stylesheets/application"

app/views/posts/new.html.erb
：

<html>
  <head>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
....

<%= content_tag :div,
  id: 'post_data',
  data: @post do %>
<% end %>
<div id="render_here"></div>
<%= javascript_pack_tag 'new_post' %>
使用此设置，单击导航到页面的链接后，不会呈现组件。在页面重新加载时，将呈现组件

我尝试了很多东西

在
new\u post.jsx
中，在注释掉所有内容并只留下
console.log（document.readyState）
后，控制台显示两次
complete
。在页面加载时，它显示
加载

然后我尝试在
new\u post.jsx
中使用jQuery的
document.ready
：

$(document).ready(function() {
  if (pageInitialized) {
    return;
  }
  pageInitialized = true;

  console.log('render');
...
同样，在页面导航到后，
render
会显示两次。在页面重新加载时，
render
显示一次

发生了什么事？

我知道这是通过一个变通方法为您解决的，但我在搜索同一问题时第一次遇到了这个问题，因此，为了将来有相同问题的其他人提供参考，我想留下一个解释

如本文所述，更好的方法是监听TurboLink事件

document.addEventListener（“TurboLink:load”，（）=>{
警报（“已加载”）；
}
或者如果您需要jQuery

$（document）.on（“turbolinks:load”，（）=>{
警报（“已加载”）；
}
CoffeScript变体：

document.addEventListener“TurboLink:load”，->
警报“已加载”
Update：我发现罪魁祸首是
require（“turbolinks”）.start（）
在
application.js
中。删除该行可以正确加载我的组件。谢谢，这真的很有帮助。提到的@jules解决方法对我也很有效，但更好地理解了正在发生的事情，不需要禁用turbolinks。 
$(document).ready(function() {
  if (pageInitialized) {
    return;
  }
  pageInitialized = true;

  console.log('render');
...