Considere la siguiente estructura:

 .container { width: 200px; height: 100px; overflow: auto; overflow-y: hidden; } .container p { width: 300px; height: 100px; background-color: yellow; }

 <div class="container"> <p>Sample Text1, Sample Text2, Sample Text3</p> </div> <button onclick="handleScrollLeft()">Left</button> <button onclick="handleScrollRight()">Right</button>

Debido a que estoy trabajando en ReactJS, mi código real se parece más a esto:

 export function Slider() { const handleScrollLeft = () => { } const handleScrollRight = () => { } return ( <> <div className="container"> <p>Sample Text1, Sample Text2, Sample Text3</p> </div> <button onClick="handleScrollLeft">Left</button> <button onClick="handleScrollRight">Right</button> </> ); }

Con esos 2 botones me gustaría cambiar el valor de desplazamiento (mover hacia la izquierda y hacia la derecha respectivamente). No estoy seguro de cómo manejar este tipo de cambio:

1. En uso ¿Efecto? (No quiero forzar el renderizado, solo expanda la funcionalidad de desplazamiento a esos 2 botones)
2. ¿Crear gancho personalizado? (La misma preocupación)
3. ¿O debería modificar directamente ese elemento DOM en las funciones del controlador? (Sé que esto es un gran no-no en React)

Estoy realmente confundido sobre qué enfoque es correcto, cualquier consejo o solución con más explicaciones sobre por qué sería apreciado