Устранение неполадок с функциями JavaScript Preline пользовательского интерфейса в среде React/Inertia
Я потратил около шести часов, пытаясь решить эту проблему, но безуспешно:
В качестве основных технологий я использую Laravel, Vite, React и Inertia. Моя цель — реализовать боковую панель Preline, включающую аккордеонные NavLinks. Однако, поскольку переходы HeadlessUI создают эту боковую панель, ни одна из функций Preline не работает. Я мог бы создать компонент, который отображается при загрузке страницы, позволяя всем функциям выполняться правильно. Однако я ожидаю возникновения подобных проблем с другими компонентами или подозреваю, что это может произойти во время навигации по страницам. Буду очень признателен за любую помощь в решении данного вопроса.
Как вы, возможно, знаете, это конфигурация 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";
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
Ответы 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», который ответил на тот же вопрос о HSDropdown здесь, и я смог решить его для всех инструментов в PrelineUI.