使映射中的两个div同时可调整大小

Question

我有一个名为products的数组，它有4个不同的产品。通过映射它，我创建了4个不同的可调整大小的div，如下所示：

{products.map((item, index) => {
return (
<div key={index} style={{ margin: "8px 0px 0px 0px", display: "flex" }}>
<div className="resizable-switch-column"> 
<div className="switch-container">
<div className="switch-bar"/>
</div>
</div>
</div>
);
})}

我的问题是：，如何同时调整所有div的大小？例如，如果我调整第二个div的大小，那么其他3个div必须同时调整大小。

这是我的CSS代码：

.switch-container {
background-color: var(--background-secondary);
border-radius: 4px;
height: 16px;
margin: auto 0px;
width: 100%;
}
.switch-bar{
background-color: var(--color-primary-chrome20);
border: 1px var(--color-primary-lighten2) solid;
border-radius: 4px;
max-width: calc(100% - 1px);
overflow: auto;
height: 14px;
resize: horizontal;
}
.switch-bar::-webkit-resizer {
background-color: transparent;
}

这就是它目前的工作方式。

Answer 1

也许您可以将宽度与useState挂钩内联存储。

const [width, setWidth] = useState('100%');
<div style={{width: width}} yourDraggingFunction={() => whenDragging()} />
const whenDragging = () => setWidth(someWidthVariable);

把它想象成更多的伪代码，不要把它当成字面意思。目标是操作单个状态变量，而不管调整哪个元素的大小。