Estoy tratando de hacer un juego de clicker en reaccionar. Tengo un componente que incrementa la cantidad de monedas en 1. Sin embargo, quiero poder enviar esto a otro componente para que pueda usarse. Ejemplo: comprar una actualización y restar la cantidad de monedas.
¿Cómo puedo hacer esto?
Juego.jsx
export default function Game() { // set state to bet that of the Counter when it is updated const element = ( <div className="app"> <Counter /> <UpgradeMenu /> </div> ); return element; }Contador.jsx
export default function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const element = ( <div className="section"> <div className="counter"> <h1>{count} coins</h1> <button onClick={increment}>Click</button> </div> </div> ); return element; }Gracias de antemano, y espero que esto tenga sentido para lo que estoy tratando de hacer.
Para ese caso, podríamos mover el estado al padre (componente del Game ), luego el componente del Counter recibirá apoyos de count y onClick .
import { useState } from "react"; export default function Game() { const [count, setCount] = useState(0); // move the state here function handleClick() { // this function will be passed to Counter component setCount(count + 1); } const element = ( <div className="app"> <Counter count={count} onClick={handleClick} /> </div> ); return element; } export function Counter({ count, onClick }) { const element = ( <div className="section"> <div className="counter"> <h1>{count} coins</h1> <button onClick={onClick}>Click</button> </div> </div> ); return element; }Verifique este ejemplo de trabajo: https://codesandbox.io/s/so-72469269-mehsdp?file=/src/App.js
Esta puede ser una buena referencia:
Puede pasar una función como una propiedad para el elemento de los hijos y ejecutar la función dentro de él.
Padre:
export function parentElement(){ function myfunction() {return true} return( <chlidrenElement myFunction={myfunction}> ) } }Niños:
export function childrenElement({myFunction}){ const hidden = myFunction(); return( { hidden ? <chlidrenElement myFunction={myfunction}> : null } ) }