Javascript 如何使用react加载并执行jquery文件？

我不知道错误在哪里，而且在jquery中单击按钮时没有显示警告框 有两个文件

INDEX.js

import React from "react";
import ReactDOM from "react-dom";
import $ from '../node_modules/jquery'; 
import UsingJquery from './UsingJquery';

ReactDOM.render(   
                <>
                  <UsingJquery/>   
                </>,
                document.getElementById("root") 
);

从“React”导入React；
从“react dom”导入react dom；
从“../node_modules/jquery”导入$；
使用jQuery从“/UsingJquery”导入；
ReactDOM.render（
,
document.getElementById（“根”）
);

使用jQuery.jsx

import React from "react";
import $ from 'jquery';


const UsingJquery = () => {
    $('button').on('click',function (){ 
        alert('clicked')
    });

    return(
        <>
            <p>Hi</p>
            <button>Click me</button>
        </>
    )
}

export default UsingJquery;

从“React”导入React；
从“jquery”导入美元；
const UsingJquery=（）=>{
$（'button'）。在（'click'，函数（）{
警报（'单击'）
});
返回(
嗨

点击我
)
}
使用jQuery导出默认值；

在组件创建元素、返回元素并将其插入DOM之前，您正在DOM中搜索元素

如果需要访问渲染元素，则应使用

import React，{useRef，useffect}来自“React”；
导入“/styles.css”；
从“jquery”导入$；
导出默认函数App（）{
const buttonRef=useRef（null）；
useffect（（）=>{
如果（！buttonRef.current）返回；
$（buttonRef.current）.on（“单击”，函数（）{
警报（“点击”）；
});
}，[buttonRef]）；
返回(
嗨

点击我
);
}

但是，您几乎应该总是避免直接访问DOM，而是将JSX与状态和道具结合使用

const click = () => {
    alert('clicked');
};

const NotUsingJquery = () => {
    return(
        <>
            <p>Hi</p>
            <button onClick={click}>Click me</button>
        </>
    )
}

const click=（）=>{
警报（“点击”）；
};
const NotUsingJquery=（）=>{
返回(
嗨

点击我
)
}

另外，不建议直接引用

node\u modules

中的模块，正如您在第一个示例的第3行中所做的那样。相反，直接引用包名，就像您对其他导入所做的一样。嗨@Abhinav，欢迎来到stackoverflow。我已经编辑了你的问题标题，使其更具相关性，并从你的帖子中删除了“请帮助我”，因为它与你所问的问题无关。

const click = () => {
    alert('clicked');
};

const NotUsingJquery = () => {
    return(
        <>
            <p>Hi</p>
            <button onClick={click}>Click me</button>
        </>
    )
}