想要制作箭头动画以展开或折叠链接的子链接列表 ReactJS

Question

函数第一次正确执行时，当之后一直单击按钮时-没有。我认为它在某个地方终止了。我认为，在一些检查点中，由于某种原因，值为空，也许这就是它不为空的原因；t执行时，ebacsie第一次总是正确执行，之后的所有时间都是否定的；函数几乎完成执行"；

预期的行为是有一个图标箭头，点击它将打开/关闭导航中主链接的子链接列表。

像这样：

图标是">quot；链接是某种链接

当某个链接被点击时，我想要的导航外观就像："<quot；somelink链接1链接2链接3(使子菜单打开(

我在用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(返回">

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

这里有一个简单的方法来实现一个根据打开/关闭状态旋转箭头的按钮：

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>
);
}