Я работаю с проектом Rails 6 rc1 с React и Webpacker.
В настоящее время я использую javascript_pack_tag для визуализации компонентов React в моем приложении Rails.Я пытаюсь не использовать драгоценный камень, такой как 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.
Затем я попытался использовать jQuery's document.ready в new_post.jsx:
$(document).ready(function() {
if (pageInitialized) {
return;
}
pageInitialized = true;
console.log('render');
...
И снова, render отображается дважды послестраница перемещена в.При перезагрузке страницы render отображается один раз.
Что происходит?