想要制作箭头动画来展开或折叠 link 的子 links 列表 ReactJS

Question

函数第一次正确执行，之后一直点击按钮 - 不。我认为它在某处终止了。我认为在某些检查点中，由于某种原因该值是空的，也许这就是它不执行的原因，ebacsie 第一次总是正确执行，之后所有时间都没有执行。此后所有时间我都看不到“功能几乎完成执行”的控制台日志

预期的行为是有一个图标箭头，onClick 将 open/close 主 link 的子link 列表显示在导航中。

像这样：

图标是“>”，link是一些link

当 somelink 被点击时，我希望导航的外观是这样的：“<” somelink link1 link2 link3（以便打开子菜单）

我正在使用 React 挂钩。请帮助我，我做错了什么？

    const ServiceConditions = () => {
      const [arrowIsClicked, setArrowIsClicked] = React.useState(false);
  const handleSublinksExpandCollapse = (e : React.MouseEvent<SVGSVGElement>) => {
    console.log("arrow is clicked");
    if (arrowIsClicked) return;
    setArrowIsClicked(true);
    if ((e.target as HTMLElement).style.transform === "rotate(0deg)") {
      (e.target as HTMLElement).style.transform = "rotate(180deg)";
     
      if (!e.target) console.log(e.target); return
      const parent = (e.target as HTMLElement).parentNode;
      if (!parent) console.log(e.target); return 
      const nextSibling = parent.nextSibling;
      if (!nextSibling) console.log(e.target); return 
      (nextSibling as HTMLElement).style.display = "block";
      console.log("function has almost done executing")
      setArrowIsClicked(false)
      
    } else {  setArrowIsClicked(true); (e.target as HTMLElement).style.transform = "rotate(0deg)";
    
    if (!e.target) console.log(e.target); return 
    const parent = (e.target as HTMLElement).parentNode;
    if (!parent) console.log(e.target); return 
    const nextSibling = parent.nextSibling;
    if (!nextSibling) console.log(e.target); return
    (nextSibling as HTMLElement).style.display = "none"; setArrowIsClicked(false); }
   
  }
    
      return (
          <Container>
            {    isDesktop &&
              <><NavigationContainer>
              <StyledScrollSpy
              scrollTargetIds={["section_1", "section_2", "section_3"]}
              offset={100}
              activeNavClass="is-active"
              scrollDuration="1000"
              headerBackground="true"
          >
              <List>
                  <MainRef><Line1><MainRefTypography variant="body1"><a href="#">Home</a></MainRefTypography><IconStyled id="ad-ap" onClick={(e : React.MouseEvent<SVGSVGElement>) => {handleSublinksExpandCollapse(e)}}></IconStyled></Line1><div><LinksInsideList>
                    <MainRef><LinkInsideTypography variant="body4"><a href="#section_1">Section 1</a></LinkInsideTypography></MainRef>
                  <MainRef><LinkInsideTypography variant="body4"><a href="#section_2">Section 2</a></LinkInsideTypography></MainRef>
                  <MainRef><LinkInsideTypography variant="body4"><a href="#section_3">Section 3</a></LinkInsideTypography></MainRef>
                  </LinksInsideList></div></MainRef>
                  
              </List>
              </StyledScrollSpy>
          
          </NavigationContainer></>    }
                    <Articles>
                      <PageName variant={isDesktop ? "h3" : "h1"}>SERVICE CONDITIONS</PageName>
                      <Bar align={BarAlign.Left} />
                      <Spacing mobile={3} desktop={3}/>
                        <div style={{"height": "400px", width: "100%"}}><span>Welcome!</span></div>
                        <div id="section_1" style={{"height": "500px", width: "100%"}}><span>Section 1</span></div>
                        <div id="section_2" style={{"height": "500px", width: "100%"}}><span>Section 2</span></div>
                        <div id="section_3" style={{"height": "500px", width: "100%"}}><span>Section 3</span></div>
                        </Articles>
            </Container>
      );
    };
    export default ServiceConditions;

Answer 1

嗯，我认为问题在于：

"if (arrowIsClicked) return;"

首先它完全运行，将 arrowIsClicked 设置为 true，然后每次都在该行退出。

下面是实现箭头根据 open/close 状态旋转的按钮的简单方法：

function CollapsibleButton() {
  const [open, setOpen] = useState(false);

  return (
    <button
      style={{
        display: "inline-block",
      }}
      // Simply setting open to the opposite value.
      onClick={() => setOpen(!open)}
    >
      <span
        style={{
          // This makes it feel animated:
          transition: "transform 200ms linear",
          // This rotates the element:
          transform: `rotateZ(${open ? 0 : "180deg"})`,
          display: "inline-block",
        }}
      >
        {"<"}
      </span>
      Click me
    </button>
  );
}

想要制作箭头动画来展开或折叠 link 的子 links 列表 ReactJS

Wanting to make an arrow animation to expand or collapse the link's sublinks list ReactJS

javascript

jsx

reactjs

react-scroll