简体繁体 English

列表中的 SVG 元素，当我隐藏第一个父元素时，每个部分中的所有下一个 SVG 也将被隐藏，但容器不会

[英]SVG element in list, when I hide the first parent, all of next SVG in each section will be hidden too, but not the container

原文 2022-04-20 16:47:52 9 1 javascript/ reactjs/ svg/ next.js

I face a strange bug with Next .我在Next中遇到了一个奇怪的错误。 With getServerSideProps , I made a request to my api folder, this result a simple JSON .使用getServerSideProps ，我向我的 api 文件夹发出请求，结果是一个简单的JSON 。 All is good.一切都很好。

I display the content perfectly, no problem.我完美地显示内容，没问题。

I put on the parent element a onClick attribute, who call a function of my main file No problem, all is good too.我在父元素上放了一个onClick属性，谁调用我main文件的函数没问题，一切都好。

But, in this function, I ask to hide the children of the global element.但是，在这个函数中，我要求隐藏全局元素的子元素。 It works, but, when it's the first occurence of the list, all others SVG in the list get hidden too, but in fact, in CSS , nothing appears.它可以工作，但是，当它是列表的第一次出现时，列表中的所有其他SVG也会被隐藏，但实际上，在CSS中，什么都没有出现。

Do you know why ?你知道为什么吗？

I post with this a Vercel link, GitHub repo, and screens.我用这个发布了 Vercel 链接、 GitHub存储库和屏幕。

I solved this, by changing the SVG element, with a <Image/> element... But it's not clean...我通过使用<Image/>元素更改SVG元素解决了这个问题......但它并不干净......

Vercel Link : Vercel Vercel 链接： Vercel

GitHub Repo : GitHub GitHub 回购： GitHub

Screen 1屏幕一
最初的

Screen 2屏幕 2
单击第一个元素

Screen 3屏幕 3
点击第二个元素

1 个解决方案

A quick fix, but isn't clean for me... Replace svg component by ... And it's work.一个快速修复，但对我来说并不干净......将 svg 组件替换为......并且它的工作。 Maybe a bug with id on SVG elements.可能是 SVG 元素上的 id 错误。