React - 如何使用 Materialize 的函数添加 jquery 脚本

Question

你好，我想添加jquery到react应用程序，但我不知道如何做到这一点。我使用materialize来构建一个导航栏，我想使用。sidenav函数从他们的库。

我安装了jquery

npm install jquery

并添加

import $ from "jquery";

到。/app.js，然后在Navbar.js中我得到/

import { Link } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav className="nav-wraper">
<div className="container">
<a Link to="/" className="brand-logo">
Blog
</a>
<a Link to="/" className="sidenav-trigger" data-target="mobile-links">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/create">New Blog</Link>
</li>
<li>
<Link to="/signup">Sign up</Link>
</li>
</ul>
</div>
</nav>
<ul className="sidenav" id="mobile-links">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/create">New Blog</Link>
</li>
<li>
<Link to="/signup">Sign up</Link>
</li>
</ul>
</>
);
};
export default Navbar;

我应该把这段代码放在哪里?:

$(document).ready(function () {
$(".sidenav").sidenav();
});

Answer 1

在某种程度上，您不需要使用$(document).ready语句。相反，您可以在功能组件中使用useEffect和空深度数组([])，或者在类组件中使用componentDidMount。请看下面的例子:(记住在index.html中使用materialized -css cdn)。在功能组件(如你是):

import React, { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import M from 'materialize-css';

const Navbar = () => {
const myNavbar = useRef('');
useEffect(() => {
M.Sidenav.init(myNavbar);
}, []);
return (
<>
<nav className="nav-wraper" ref={myNavbar}>...</ul>
</>
);
};
export default Navbar;

有关的更多信息请使用和useRef声明，我想请您参考官方文件