Preline UI javascript 函数在 React/Inertia 中不起作用

Question

花了大约6个小时仍然无法解决这个问题： 我使用 Laravel、Vite、React 和 Inertia 作为主要技术。我想使用具有手风琴导航链接的 Preline 侧边栏，但由于该侧边栏是由 HeadlessUI 转换生成的，因此 Preline 功能不起作用。我知道我可以制作一个在页面加载时呈现的组件，以便所有功能都可以正确运行，但我很确定其他组件也会遇到同样的问题，或者我猜它会在页面之间的导航上发生。所以请帮我解决这个问题。

如您所知，这是惯性配置：

import "./bootstrap";
import "../css/app.css";

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);

        delete el.dataset.page;
    },
    progress: {
         color: "#fbbf24",
    },
});

这就是为什么我不能使用Preline Guide

Answer 1

经过24小时的尝试不同的事情，终于找到了解决方案。 我写在这里是为了对某人有所帮助。 在代码中添加多行并创建 app.jsx 文件（其中包含 Inertia 配置），如下所示：

import "./bootstrap";
import "../css/app.css";

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { HSStaticMethods } from "preline";

HSStaticMethods.autoInit();

const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
        HSStaticMethods.autoInit();
    }
});

observer.observe(document.body, {
    attributes: true,
    subtree: true,
    childList: true,
    characterData: true,
});

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);

        delete el.dataset.page;
    },
    progress: {
        color: "#fbbf24",
    },
});

特别感谢“biskoot”，他在here回答了有关 HSDropdown 的相同问题，我可以解决 PrelineUI 中所有工具的问题。