Question

所以这是我的第一个减速路线的组件。我决定制作两个导航项。并做了一些造型。但是我把错误归咎于很多人。因为我尝试添加具有悬停效果的样式。我不想使用CSS。这是我的代码：

import React, { useState } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Products from './Screens/ProductsList';
import Preview from './Screens/Product';
import ProductCreate from './Screens/ProductCreate';
import ProductEdit from './Screens/ProductEdit';
import Home from './Screens/Home';

function App() {
  const [hover, setHover] = useState(false);
  return (
    <BrowserRouter>
      <div style={style.navigationContainer}>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products"
        >
          Products List
        </Link>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products/create"
        >
          Create Product
        </Link>
      </div>

      <Switch>
        <Route
          key="edit-product"
          path="/products/:id/edit"
          component={ProductEdit}
        ></Route>
        <Route
          key="add-product"
          path="/products/create"
          component={ProductCreate}
        ></Route>
        <Route key="preview" path="/products/:id" component={Preview}></Route>
        <Route key="products" path="/products" component={Products}></Route>
        <Route exact path="/" component={Home}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Answer 1

您需要将一个函数传递给onMouseEnter和onMouseLeave，只要这些事件被触发，它们就会调用setHover函数

更改

onMouseEnter={setHover(true)}
onMouseLeave={setHover(false)}

到

onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}

执行onMouseEnter={setHover(true)}将立即调用setHover函数并更新状态，而不是等待onMouseEnter事件。因此，您的代码陷入了更新状态并重新呈现的无限循环中

尽管，如果您只想对hover上的任何元素应用某种样式，那么使用CSS进行处理要比尝试做的要好得多。悬停在组件上时，无需重新渲染即可，只需更新其样式即可。

还请记住，由于在Link为true时将样式应用于两个hover组件，因此，如果将鼠标悬停在Link组件之一上，它将设置{{ 1}}为true，两个hover组件都将被设置样式。

Answer 2

您需要在onMouseOver={() => {setHover(true}} sandbox here这样的事件上触发该功能，但是通过您的技巧，当一个鼠标悬停时，您将同时更改两个链接

onMouseEnter onMouseLeave错误：重新渲染的次数过多

2 个答案: