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 语句。取而代之的是，您可以在 功能组件 或 componentDidMount 中使用 useEffect 和空 deps 数组 ([]) class 个组件。看下面的例子：（记得在 index.html 中使用 Materilized-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;

有关 useEffect 和 useRef 语句的更多信息，请参阅 official documentation

React - 如何使用 Materialize 的功能添加 jquery 脚本

React - how to add jquery script with Materialize's function

javascript

jquery

materialize

reactjs