jul*_*les 5 javascript dom ruby-on-rails reactjs webpack
我正在使用 React 和 Webpacker 处理 Rails 6 rc1 项目。
我目前正在使用javascript_pack_tag在 Rails 应用程序中渲染 React 组件。我试图不使用宝石，react-rails只是为了让事情变得简单。
今天，我发现了一个奇怪的行为，即从链接导航到页面后，我的 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/views/layouts/application.html.erb:
<html>
<head>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
....
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:
<%= content_tag :div,
id: 'post_data',
data: @post do %>
<% end %>
<div id="render_here"></div>
<%= javascript_pack_tag 'new_post' %>
app/javascript/packs/new_post.jsx：（尽管此文件中的 React 代码与问题并不真正相关）
import React from 'react';
import ReactDOM from 'react-dom';
import PostForm from '../components/PostForm';
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('post_data');
const data = JSON.parse(node.getAttribute('data'));
const dom = document.querySelector('#render_here');
ReactDOM.render(
<PostForm post={data} />,
dom);
});
通过此设置，单击导航到该页面的链接后不会呈现该组件。页面重新加载时，将呈现该组件。
我尝试了很多事情。
在 中new_post.jsx，注释掉所有内容并仅保留 后console.log(document.readyState)，控制台显示complete两次。页面加载时，它显示loading。
document.ready然后我尝试在以下位置使用 jQuery new_post.jsx：
$(document).ready(function() {
if (pageInitialized) {
return;
}
pageInitialized = true;
console.log('render');
...
render导航到页面后，再次显示两次。页面重新加载时，render显示一次。
到底是怎么回事？
我知道这已通过解决方法为您解决了，但我在搜索相同问题时发现了这个问题作为第一个结果，因此为了供其他遇到相同问题的人将来参考，我想留下一个解释。
如此处所述Rails 5: how to use $(document).ready() with Turbo-links更好的方法是监听 Turbolinks 事件。
document.addEventListener("turbolinks:load", ()=> {
alert("loaded");
}
或者如果你需要 jQuery
$( document ).on("turbolinks:load", ()=> {
alert("loaded");
}
CoffeScript 变体：
document.addEventListener "turbolinks:load", ->
alert "loaded"
| 归档时间： |
|
| 查看次数： |
2191 次 |
| 最近记录： |