JS/next.js:为什么通过document.querySelector()改变map()元素会导致渲染?<

Question

const slides = [
[string1, string2, stringi],
[string1, string2, stringi],
[string1, string2, stringi],
[string1, string2, stringi],
];
const changeSlide = (num) => {
const discipline = document.querySelector("#changeSlide-"+num)
discipline.classList.toggle("hidden")
}
return (
<div className="flex flex-col w-1/2 h-60 px-12 py-4 items-center shadow-lg rounded-xl ring-1 ring-black/5">
<h1 className="pb-2">
Technical Skills
</h1>
<ul className="flex space-x-2 border-b-2 mb-2">
<li>
<a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={() => changeSlide(0)}>Software</a>
</li>
<li>
<a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={() => changeSlide(1)}>Firmware</a>
</li>
<li>
<a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={() => changeSlide(2)}>Mechanical</a>
</li>
<li>
<a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={() => changeSlide(3)}>DevOps</a>
</li>
</ul>
{slides.map(function(slide, idx) {
return <div className="hidden"
id={"changeSlide-"+idx}
key={idx}>
{slide.map(function(line, jdx) {
return <p key={jdx}>{line}</p>
})
}
</div>
})
}
</div>
)
}

这是它为我呈现的内容

我希望这个react组件在点击相应的菜单按钮时返回幻灯片数组中的字符串。它就是这样做的。问题是，页面似乎在内容显示后再次呈现。我说"可能"，因为据我所知，它可能是在重新运行map函数或其他东西。

我需要1)找出changeSlide(idx)被称为onClick后发生的事情和原因，以及2)该怎么做。

我不确定上面的代码是否会运行，因为我删除了很多我实际使用的代码。我觉得简单一点的观点会有帮助。让我知道，我会重新发布工作代码，但这应该是最好的说明问题。谢谢。

Answer 1

问题是链接有一组href，所以点击它将导航(再次到当前页面，因为href是一个空字符串)。要么删除href，防止点击时的默认动作，要么使用另一个元素(可能是一个按钮)，使其看起来像一个链接。

删除href:

<a className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={() => changeSlide(0)}>Software</a>

使用event.preventDefault():

<a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
onClick={e => {
e.preventDefault();
changeSlide(0);
}}>Software</a>

此外，最好将选择的索引存储在状态中，而不是手动修改DOM。