个人中心
gpt4 book ai didi

React Scroll bug. Worked on pure HTML CSS JS, but it doesn't work on React(反应卷轴错误。在纯HTMLCSSJS上工作，但不能在Reaction上工作)

转载 作者：bug小助手 更新时间：2023-10-25 11:15:33 30 4
gpt4 key购买 nike



I found a minor bug which is weird. The main point is I tried to click my .nav li and I expected it would close the navbar. If it's on pure HTML CSS and JS it will work, but if it's on React it doesn't work. Here's my React:

我发现了一个很奇怪的小漏洞。重点是我试图点击我的.nav li，我预计它会关闭导航栏。如果它是在纯HTML、CSS和JS上运行的，那么它可以工作，但是如果它运行在Reaction上，它就不能运行。以下是我的反应：


import React from 'react';
import Nav from './javascripts/Navigation';
import Ham from './javascripts/Hamburger';
import { Link } from 'react-scroll';
import '../styles/Navbar.scss';

const Navbar = () => {
    React.useEffect(() => {
        Nav();
        Ham();
    }, []);
    return (
        <nav className="nav-container">
                <ul className="nav">
                    <div id="nav-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <li>
                        <Link
                            to="container"
                            smooth={true}
                            duration={500}
                            offset={-107}
                        >
                            Home
                        </Link>
                    </li>
                    <li>
                        <Link
                            to="abt-container"
                            smooth={true}
                            duration={500}
                            offset={-107}
                        >
                            About
                        </Link>
                    </li>
                </ul>
        </nav>
    );
};
export default Navbar;

SCSS

SCSS


$w: #fff;
%nav {
    position: sticky;
    display: flex;
    padding: 15px 30px;
}
%slide {
    position: absolute;
    height: .4rem;
    box-shadow: 1px 1px 0 #666;
    transition: .5s cubic-bezier(.25, 1, .3, 1.05);
    transform: skew(-20deg);
    bottom: 1px;
    height: 100%;
}
.nav-container {
    @extend %nav;
    top: 0;
    justify-content: center;
    background: linear-gradient(110deg, #333 50%, #444 50%);
    z-index: 1;
    .nav {
        @extend %nav;
        list-style: none;
        @media (max-width: 800px) {
            li {
                display: none;
            }
        }
        a {
            position: relative;
            padding: .6em 2em;
            font-size: 20px;
            color: $w;
            display: inline-block;
            text-decoration: none;
            text-shadow: 1px 1px 0 #888;
            z-index: 3;
        }
        .slide1 {
            @extend %slide;
            background-color: #eeeeee30;
            z-index: 2;
        }
        .slide2 {
            @extend %slide;
            opacity: 0;
            background-color: transparent;
            border: 1px solid #fff;
            z-index: 1;
        }
        #nav-icon {
            display: flex;
            justify-content: center;
            width: 50px;
            height: 43px;
            margin: 2px auto;
            transform: rotate(0deg);
            span {
                display: block;
                position: absolute;
                height: 9px;
                width: 50%;
                background: $w;
                opacity: 1;
                transform: rotate(0deg);
                transition: .25s ease-in-out;
                border-radius: 9px;
                &:nth-child(even) {
                    left: 50%;
                    border-radius: 0 9px 9px 0;
                }
                &:nth-child(odd) {
                    left: 0px;
                    border-radius: 9px 0 0 9px;
                }
                &:nth-child(1),
                &:nth-child(2) {
                    top: 0px;
                }
                &:nth-child(3),
                &:nth-child(4) {
                    top: 18px;
                }
                &:nth-child(5),
                &:nth-child(6) {
                    top: 36px;
                }
            }
        }
        #nav-icon.open {
            span {
                &:nth-child(1),
                &:nth-child(6) {
                    transform: rotate(45deg);
                }
                &:nth-child(2),
                &:nth-child(5) {
                    transform: rotate(-45deg);
                }
                &:nth-child(1) {
                    left: 5px;
                    top: 10px;
                }
                &:nth-child(2) {
                    left: calc(50% - 5px);
                    top: 10px;
                }
                &:nth-child(3) {
                    left: -50%;
                    opacity: 0;
                }
                &:nth-child(4) {
                    left: 100%;
                    opacity: 0;
                }
                &:nth-child(5) {
                    left: 5px;
                    top: 24px;
                }
                &:nth-child(6) {
                    left: calc(50% - 5px);
                    top: 24px;
                }
            }
        }
    }
}
li {
    display: none;
}

jQuery

jQuery


import $ from 'jquery';

const Hamburger = () => {
    let isOpen;
    $(document).on("click", "#nav-icon", function () {
        $(this).toggleClass("open");
        isOpen = !isOpen;
        if (isOpen) {
            $(".nav").css({ display: "block", padding: "15px 0 0 0" });
            $("#nav-icon").css({ paddingBottom: "20px" });
            $("li").css({ display: "block", textAlign: "center" });
        } else {
            $(".nav").css({ padding: "15px 30px" });
            $("#nav-icon").css({ paddingBottom: "0" });
            $("li").css({ display: "none" });
        }
    });
    $(document).on("click", ".nav li", function () {
        if (isOpen) {
            isOpen = false;
            $("#nav-icon").removeClass("open");
            $(".nav").css({ padding: "15px 30px" });
            $("#nav-icon").css({ paddingBottom: "0" });
            $("li").css({ display: "none" });
        }
    });
}
export default Hamburger;

I also tried this snippet which worked very well, but when I put it on React it didn't work as it should despite both codes being interpreted in the same way.

我也尝试了这段代码，它工作得很好，但当我把它放在Reaction上时，它并没有像应有的那样工作，尽管两个代码以相同的方式解释。




let isOpen;
    $(document).on("click", "#nav-icon", function () {
        $(this).toggleClass("open");
        isOpen = !isOpen;
        if (isOpen) {
            $(".nav").css({ display: "block", padding: "15px 0 0 0" });
            $("#nav-icon").css({ paddingBottom: "20px" });
            $("li").css({ display: "block", textAlign: "center" });
        } else {
            $(".nav").css({ padding: "15px 30px" });
            $("#nav-icon").css({ paddingBottom: "0" });
            $("li").css({ display: "none" });
        }
    });
    $(document).on("click", ".nav li", function () {
        if (isOpen) {
            isOpen = false;
            $("#nav-icon").removeClass("open");
            $(".nav").css({ padding: "15px 30px" });
            $("#nav-icon").css({ paddingBottom: "0" });
            $("li").css({ display: "none" });
        }
    });

.nav-container .nav, .nav-container {
  position: sticky;
  display: flex;
  padding: 15px 30px;
}

.nav-container .nav .slide2, .nav-container .nav .slide1 {
  position: absolute;
  height: 0.4rem;
  box-shadow: 1px 1px 0 #666;
  transition: 0.5s cubic-bezier(0.25, 1, 0.3, 1.05);
  transform: skew(-20deg);
  bottom: 1px;
  height: 100%;
}

.nav-container {
  top: 0;
  justify-content: center;
  background: linear-gradient(110deg, #333 50%, #444 50%);
  z-index: 1;
}
.nav-container .nav {
  list-style: none;
}
@media (max-width: 800px) {
  .nav-container .nav li {
    display: none;
  }
}
li {
  display: none;
}
.nav-container .nav a {
  position: relative;
  padding: 0.6em 2em;
  font-size: 20px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  text-shadow: 1px 1px 0 #888;
  z-index: 3;
}
.nav-container .nav .slide1 {
  background-color: rgba(238, 238, 238, 0.1882352941);
  z-index: 2;
}
.nav-container .nav .slide2 {
  opacity: 0;
  background-color: transparent;
  border: 1px solid #fff;
  z-index: 1;
}
.nav-container .nav #nav-icon {
  display: flex;
  justify-content: center;
  width: 50px;
  height: 43px;
  margin: 2px auto;
  transform: rotate(0deg);
}
.nav-container .nav #nav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #fff;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  border-radius: 9px;
}
.nav-container .nav #nav-icon span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}
.nav-container .nav #nav-icon span:nth-child(odd) {
  left: 0px;
  border-radius: 9px 0 0 9px;
}
.nav-container .nav #nav-icon span:nth-child(1), .nav-container .nav #nav-icon span:nth-child(2) {
  top: 0px;
}
.nav-container .nav #nav-icon span:nth-child(3), .nav-container .nav #nav-icon span:nth-child(4) {
  top: 18px;
}
.nav-container .nav #nav-icon span:nth-child(5), .nav-container .nav #nav-icon span:nth-child(6) {
  top: 36px;
}
.nav-container .nav #nav-icon.open span:nth-child(1), .nav-container .nav #nav-icon.open span:nth-child(6) {
  transform: rotate(45deg);
}
.nav-container .nav #nav-icon.open span:nth-child(2), .nav-container .nav #nav-icon.open span:nth-child(5) {
  transform: rotate(-45deg);
}
.nav-container .nav #nav-icon.open span:nth-child(1) {
  left: 5px;
  top: 10px;
}
.nav-container .nav #nav-icon.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 10px;
}
.nav-container .nav #nav-icon.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
.nav-container .nav #nav-icon.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
.nav-container .nav #nav-icon.open span:nth-child(5) {
  left: 5px;
  top: 24px;
}
.nav-container .nav #nav-icon.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-container">
                <ul class="nav">
                    <div id="nav-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <li>
                        <a>
                            Home
                        </a>
                    </li>
                    <li>
                        <a>
                            About
                        </a>
                    </li>
                </ul>
        </nav>




更多回答

I can't reproduce this behaviour. Your code works in the sandbox: codesandbox.io/s/n6yjhd

我不能重现这种行为。您的代码可以在沙箱中运行：codesandbox.io/S/n6yjhd

@Eugene seems the Link from React Scroll made this issue (?). Because I tried to add the react scroll on your sandbox and it didn't work.

@Eugene似乎是Reaction Scroll中的链接造成了这个问题(？)。因为我试着在你的沙盒上添加了反应卷轴，但没有起作用。

Hmmm.. I've added the Link usages to my sandbox and it still works

嗯.。我已将链接用法添加到我的沙箱中，但它仍然有效

Aahh... I get it. Now I can see your bug

啊..。我懂了。现在我可以看到你的虫子了

Yes, the reason lies in the "Link" implementation. When "Link" is handling click event, it stops event propagation. Therefore, your handler is not triggered. Here is the source code of "Link": github.com/fisshy/react-scroll/blob/…

是的，原因在于“Link”的实现。当Link处理点击事件时，它会停止事件传播。因此，您的处理程序不会被触发。以下是“链接”的源代码：githorb.com/fashy/reaction-scroll/Blob/…

优秀答案推荐

It's not a React bug. The reason of this behaviour lies in the "Link" implementation. When "Link" is handling click event, it stops event propagation. Therefore, your handler is not triggered.

这不是一种反应错误。出现这种行为的原因在于“Link”的实现。当Link处理点击事件时，它会停止事件传播。因此，您的处理程序不会被触发。


To fix that, you can pass your own click handler as "onClick" property to the "Link" component. This click handler can be written with jQuery as well, so you can use the existing code

要解决这个问题，您可以将自己的单击处理程序作为“onClick”属性传递给“Link”组件。此点击处理程序也可以用jQuery编写，因此您可以使用现有代码


The recipe:

食谱如下：



  1. Move the existing jQuery click handler into a separate function



import $ from "jquery";

export function closeNavbar() {
 $("#nav-icon").removeClass("open");
 $(".nav").css({ padding: "15px 30px" });
 $("#nav-icon").css({ paddingBottom: "0" });
 $("li").css({ display: "none" });
}


  1. Pass this function as "onClick" property to the "Link" component


    <nav className="nav-container">
      <ul className="nav">
        <div id="nav-icon">
          ...
        </div>
        <li>
          <Link
            onClick={() => closeNavbar()}
            ...
          >
            Home
          </Link>
        </li>
      </ul>
    </nav>

更多回答

30 4 0
文章推荐： React Firestore Useeffect error type error "undefined indexOf" when accessing user collection(访问用户集合时，Reaction FiRestore UseEffect错误类型错误“unfined indexOf”)
文章推荐： TypeError: $(...).perfectScrollbar is not a function(TypeError：$(...).Perfect滚动条不是函数)
文章推荐： Keycloak + spring boot role authentification not working(Keyshaak+SpringBoot角色身份验证不起作用)
文章推荐： Question on training with label and unlabeled data(关于标签数据和非标签数据训练的问题)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com