Tengo una matriz denominada products , que tiene 4 productos diferentes. Al mapearlo, creé 4 divisiones redimensionables diferentes, como esta:
{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> ); })}Mi pregunta es: ¿cómo puedo cambiar el tamaño de todos esos divs al mismo tiempo? Si cambio el tamaño del segundo, por ejemplo, todos los otros 3 divs deben cambiarse de tamaño a la vez.
Aquí está mi código 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; }Así es como funciona en este momento.
Tal vez puedas almacenar el ancho en línea con el gancho useState.
const [width, setWidth] = useState('100%'); <div style={{width: width}} yourDraggingFunction={() => whenDragging()} /> const whenDragging = () => setWidth(someWidthVariable);Piense en esto como más pseudocódigo y no lo tome tan literalmente. El objetivo es manipular una sola variable de estado independientemente del elemento que cambie de tamaño.