在react中尝试创建jquery函数时出错

我试图在JSX组件中使用jquery函数

JSX代码：

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
import $ from 'jquery';


class Navbar extends Component {
  state = {};

   $(window).scroll(function() {
    var nav = $('#navbar');
    var top = 200;
    if ($(window).scrollTop() >= top) {
      nav.addClass('down');
    } else {
      nav.removeClass('down');
    }
  });


  render() {
    return (
      <nav className="navbar sticky-top navbar-expand-lg ">
        <NavLink
          to="/"
          class="navbar-brand"
          activeClassName="navbar-brand--active"
        >
          Web_Env
        </NavLink>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink
                to="/login"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Login
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/register"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Register
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

import React，{Component}来自'React'；
导入“../css/nav.scss”；
从'react router dom'导入{Link，NavLink}；
导入“反应引导”；
从“jquery”导入美元；
类导航栏扩展组件{
状态={}；
$（窗口）。滚动（函数（）{
var nav=$（“#navbar”）；
var-top=200；
if（$（窗口）.scrollTop（）>=top）{
资产净值增加类（“向下”）；
}否则{
导航移除类（“向下”）；
}
});
render（）{
返回(
网络环境






登录


登记


);
}
}
导出默认导航栏；

我在

$（窗口）

滚动

之间的时间段上得到一个错误，上面写着“{”或“；”预期为.ts（1144）” 下一个错误出现在

函数（）

上，它显示“（方法）导航栏。函数（）：void

---

参数声明应为.ts（1138）”。我不明白我做错了什么，也不明白函数为什么不起作用。我尝试了另一段jquery代码，但在函数上遇到了另一个错误。我确实安装了jquery并将其导入。

以下代码必须放在

componentDidMount

生命周期方法中：

componentDidMount（）{
$（窗口）。滚动（函数（）{
var nav=$（“#navbar”）；
var-top=200；
if（$（窗口）.scrollTop（）>=top）{
导航添加类（“顶部”）；
}否则{
导航移除类（“向下”）；
}
});
}

---

顺便说一句，我不会将jQuery与React一起使用。这种做法不符合目的，会导致一些奇怪和意外的行为。

您需要将事件处理程序移动到componentDidMount生命周期方法中

componentDidMount() {
    $(window).scroll(() => {
        const nav = $('#navbar');
        const top = 200;
        if ($(window).scrollTop() >= top) {
            nav.addClass('top');
        } else {
            nav.removeClass('down');
        }
    });
}

---

请不要将jQuery与React一起使用。这绝对没有理由。只需学习React。我是一个javascript乞丐，React，所以现在使用React来做这件事太难了，我想我会使用一点jQuery。是的，出于学习目的，它很好。但是React并不是真正为使用jQuery而构建的，所以它可能会导致一些问题。无论如何，祝你好运，玩得开心。：）