I am trying to horizontally display an SVG for each element in a mapped array. I've tried multiple things but the only thing that has worked so far has been setting the div
that the mapped SVGs are contained in to display: "flex"
. However, that introduced a new problem where whenever an element is added to or taken away from the state, the SVGs shrink/expand respectively. I was wondering if anyone could help me troubleshoot how to get these SVGs to be displayed horizontally while maintaining the same size no matter how many there are. My code is available below.
我正在尝试为映射数组中的每个元素水平显示一个SVG。我尝试了多种方法,但到目前为止唯一有效的方法是将映射的SVG所在的div设置为显示:“flex”。然而,这带来了一个新的问题,无论何时向状态添加元素或从状态中移除元素,SVG都会分别收缩/扩展。我想知道是否有人可以帮助我解决如何让这些SVG水平显示,同时保持相同的大小,无论有多少。我的代码如下所示。
import { useState } from "react";
import "./styles.css";
export default function App() {
const [states, setStates] = useState([0, 0, 0, 0, 0]);
return (
<div style={{ display: "flex" }}>
{states.map((state, stateIndex) => (
<svg viewBox="0 0 100 35">
<rect fill={"black"} width={"25"} height={"25"} />
</svg>
))}
</div>
);
}
I've also made a Code Sandbox demo here: https://codesandbox.io/embed/nervous-forest-jgwwhr?fontsize=14&hidenavigation=1&theme=dark.
我还在这里制作了一个代码沙盒演示:https://codesandbox.io/embed/nervous-forest-jgwwhr?fontsize=14&hidenavigation=1&theme=dark.
更多回答
优秀答案推荐
I have updated to codesand box code if you can see yodate
我已经更新了代码和盒子代码,如果你能看到yodate的话
Please try this solution.
请尝试这个解决方案。
<div style={{ display: "flex", flexWrap: 'wrap' }}>
{states.map((state, stateIndex) => (
<div style={{ flex: "0 0 auto",width:"25%" }}>
<svg viewBox="0 0 100 35" >
<rect fill={"black"} width={"25"} height={"25"} />
</svg>
</div>
))}
</div>
Update your App.js return data with this one.
用这个来更新您的App.js返回数据。
更多回答
It worked, thank you! I'll try to look over it and see if I can find an explanation for why it did.
成功了,谢谢!我会试着看一看,看看我是否能找到一个解释为什么会这样。
It is row and col, which we used in bootstrap. I just converted the data row and col class to CSS and it's worked.
它是ROW和COLL,我们在引导中使用了它。我只需将数据行和列的类转换为css,它就起作用了。
我是一名优秀的程序员,十分优秀!