0
164
Vistas¿Cómo puedo mostrar alguna interfaz de usuario, por ejemplo, un círculo y cuando llegan los datos, puedo cambiar el color de un círculo específico?
Estoy trabajando en un proyecto en el que
1- tengo que mostrar 50 círculos en la pantalla. 2- Mis datos se transmiten en tiempo real. datos en forma de objeto en el que estoy almacenando {id: 0, color: "red"}. Entonces, por ejemplo, si la identificación en tiempo real es {id: 10, color: "rosa"}. entonces el color del círculo número 10 debe ser rosa. Para simplificar, estoy generando un enlace personalizado para generar un número aleatorio. //RandomNumber() es un enlace personalizado.
const [random,setRandom]=RandomNumber(); useEffect(()=>{ console.log(random); if(random>10 && random<200) { setColor("Red") } else if(random>500) { setColor("brown") } }) return ( <div className="show-data" onWheel={onWheelHandler}> { Array.apply(null, { length: 50 }).map((a, i) => ( pad=="60px"? <button className="wave-circle" style={{backgroundColor:color,padding:pad}} onMouseOver={onMouseOverHandler} onClick={onClickHandler} onMouseOut={onMouseLeaveHandle } key={i}> {i+1} </button> : <button className="wave-circle" style={{backgroundColor:color,padding:pad}} value={i+1} onMouseOver={onMouseOverHandler} onClick={onClickHandler} onMouseOut={onMouseLeaveHandle} key={i}> </button> ) , ) }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
(1) la matriz de datos de "círculo" debería almacenarse en el estado, (2) cada vez que se procesan los datos de transmisión, asigne la matriz anterior a una nueva matriz y actualice el elemento específico haciendo coincidir la identificación.
Ejemplo:
function App() { const [circles, setCircles] = React.useState( Array.from({ length: 50 }, (_, id) => ({ id, color: "red" })) ); // Simulate data on interval React.useEffect(() => { const tick = () => { setCircles((circles) => { const id = Math.floor(Math.random() * circles.length); return circles.map((c) => (c.id === id ? { ...c, color: "brown" } : c)); }); }; const timer = setInterval(tick, 250); return () => clearInterval(timer); }, []); return ( <div className="App"> {circles.map(({ id, color }) => ( <div key={id} className="circle" style={{ backgroundColor: color }} /> ))} </div> ); } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta