React JS: jQuery не работает после обновления React с версии 16.13.1 до 18.2.0 ⇐ Jquery

[Гость]

Я обновляю устаревший код приложения React с версии 16.13.1 до 18.2.0.
В настоящее время код использует jQuery. До обновления приложение работает нормально.
Я обнаружил проблемы в рендеринге index.js.
React 16 использует это для рендеринга:

Код: Выделить всё

import { render } from 'react-dom';

const container = document.getElementById('app');
render(, container);

Хотя, согласно документации React, React 18 использует это:

Код: Выделить всё

import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
root.render();

Я могу вернуться к предыдущему синтаксису, и jQuery будет работать, но тогда он выдаст мне предупреждение:

Код: Выделить всё

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.
Until you switch to the new API, your app will behave as if it's running React 17.

Предполагается, что когда я нажимаю на раскрывающееся меню, например Организационная единица, она будет расширяться и показывать своим детям. Меню свернется, если щелкнуть его еще раз.
Когда jQuery использует первый синтаксис render(), он работает так, как задумано:


При использовании createRoot() ничего не происходило, даже если Я несколько раз нажимал на меню:


Вот код jQuery (устаревший код, не мой), если необходимо:

Код: Выделить всё

$("#sidebar-menu a").on("click", function (e) {
if ($(this).parent().hasClass("submenu")) {
e.preventDefault();
}
if (!$(this).hasClass("subdrop")) {
$("ul", $(this).parents("ul:first")).slideUp(350);
$("a", $(this).parents("ul:first")).removeClass("subdrop");
$(this).next("ul").slideDown(350);
$(this).addClass("subdrop");
} else if ($(this).hasClass("subdrop")) {
$(this).removeClass("subdrop");
$(this).next("ul").slideUp(350);
}
});

$("#sidebar-menu ul li.submenu a.active")
.parents("li:last")
.children("a:first")
.addClass("active")
.trigger("click")

Что-то я пропустил?
Пожалуйста, дайте мне знать, если потребуется дополнительная информация или контекст.
Примечание:

• Я знаю, что использовать jQuery в React – не лучшая практика, поскольку оба метода манипулируют DOM.
  < li>Удаление jQuery невозможно.

Подробнее здесь: https://stackoverflow.com/questions/781 ... 13-1-to-18