尝试在反应中创建 jquery 函数时出现错误

Question

我正在尝试在我的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;

我在$(window)之间的时间段出现错误。scroll显示"'{'或';' expect.ts(1144( " 下一个错误是在function()上，上面写着" (method( Navbar.function((： void 参数声明预期.ts(1138( "。我不明白我做错了什么，或者为什么函数不起作用。我尝试了另一段jquery代码，并在函数上遇到了另一个错误。我肯定安装了jquery，它被导入了。

Answer 1

以下代码必须进入componentDidMount生命周期方法：

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

顺便说一下，我不会将 jQuery 与 React 一起使用。这种违背了目的，会导致一些奇怪和意想不到的行为。

Answer 2

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

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