我有一个使用React和esbuild的新Rails项目。设置非常标准:
<div
id="user_edit_page"
data-controller="user-edit-page"
>
</div>
然后,a:
import { Controller } from "@hotwired/stimulus"
import React from "react";
import { createRoot } from "react-dom/client";
import UserEditPage from "../components/UserEditPage";
// Connects to data-controller="user-edit-page"
export default class extends Controller {
connect() {
const app = document.getElementById("user_edit_page");
createRoot(app).render(<UserEditPage />)
}
}
当我在页面之间导航时,会出现非常烦人的闪烁。感觉Rails正在提供缓存响应,然后重新初始化React组件,然后重新呈现。
我认为可以禁用turbolinks来解决这个问题,但我想知道是否有更好的Rails方式让事情按照预期工作。
hydrateRoot(app, <UserEditPage />)
代替createRoot(app).render(<UserEditPage />)
吗?hydrateRoot
在react-dom/client
中。 - acdcjunior