如何通过NPM或Hook将jQuery工具提示代码注入React ?

Question

jQuery代码被注入到React项目的根文件中，现在它需要通过NPM包来使用。有人能帮助我或给我一些建议吗?

<script>
$(document).ready(function() {
$("body").tooltip({ selector: '[data-bs-toggle=tooltip]', trigger : 'hover', html:true });
});
function hideTooltip() {
$(".tooltip").hide();
}
</script>

Answer 1

您可以使用import $ from 'jquery';和useEffect/componentDidmount

import { createRoot } from 'react-dom/client';
import TodoList from './refs/TodoList';
import { useEffect } from 'react';
import $ from 'jquery';
const App = () => {
useEffect(() => {
$("body").tooltip({ selector: '[data-bs-toggle=tooltip]', trigger : 'hover', html: true });
}, []) 
return (
<div>
<TodoList />
</div>)
};
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

Answer 2

你没有。不建议在react应用程序中使用jQuery。

React在其文档中声明:

"仅仅因为它是可能的，并不意味着它是React应用程序的最佳方法。我们鼓励您尽可能使用React组件。React组件在React应用程序中更容易重用，并且通常提供对其行为和外观的更多控制。">

你可以通过使用CSS (:hover &相邻兄弟选择器)

你也可以使用一个库来完成这个任务，而不需要重新发明轮子

下面是一个代码示例来说明我的话:

.tooltip-container {
padding: 1rem;
position: relative;
}
.tooltip-content {
opacity: 0;
visibility: hidden;

background: #333;
padding: 5px 10px;
color: #fff;

position: absolute;
top: 0;
left: 0;

transition: all 0.3s;
}
.tooltip-hoverable:hover + .tooltip-content {
opacity: 1;
visibility: visible;
}

<div class="tooltip-container">
<p class="tooltip-hoverable">
Hover me
</p>
<span class="tooltip-content">I'm the tooltip</span>
</div>