gpt4 book ai didi

ReactJS: How do you display an array of SVGs horizontally while maintaining their size?(ReactJS:如何在保持大小不变的情况下水平显示SVG数组?)

转载 作者:bug小助手 更新时间:2023-10-28 10:59:15 24 4
gpt4 key购买 nike



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,它就起作用了。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com