Tengo un juego programado en código React que se divide en dos secciones: La primera sección define si el juego es fácil o difícil. La segunda sección es el juego en sí.
Function App() { return ( <> <div><First/></div> <div'><Second/></div> </> ) } export default MainEn la primera sección, el usuario hace clic en un botón para definir el nivel. Eso debería tener un impacto en la segunda sección. Esto es lo que escribí.
Primero.js:
import React from 'react' import { useState } from "react"; import '../paginas/ind.css' import Second from './Second'; function First() { const [Difficulty,setdifficulty] = useState(1) function easy(e){ setdifficulty(1) Second(1) } function hard(e){ setdifficulty(2) Second(2) } return ( <> {Difficulty !== 1 ? <div onClick={easy}>Easy</div> : <div>Easy</div>} {Difficulty !== 2 ?<div onClick={hard}>Medium</div>: <div>hard</div>} </> ) } export default IzqSegundo.js:
import React from 'react' import '../paginas/ind.css' import Difficulty from './First' import First from './First ' function Second (Difficulty) { console.log(Difficulty) return ( <> {Difficulty === 1 ? <div>This game is going to be easy</div>:<div></div>} {Difficulty === 2 ? <div>This game is going to be hard</div>:<div></div>} </> ) } export default CentralNo sé por qué, pero cuando hago clic en "fácil" o "difícil" en el primer script, no sucede nada en el segundo. Al usar console.log (Dificultad) en Second.js, puedo saber que está ocurriendo un cambio en el valor de la variable "Dificultad". Pero la condición "{Dificultad === 1 ? Este juego va a ser fácil:}" asume que su valor es cero. No le encuentro ningún sentido a esto. Por favor, ayúdame.
Gracias
Primero debe aprender sobre lo básico de reaccionar, cómo pasar los accesorios y los estados correctamente, el uso de la API de context en reaccionar, etc. Le recomiendo que primero siga algunos tutoriales.
Dicho esto, si cambia las funciones de su App , First y Second componente como se muestra a continuación, obtendrá el resultado. Esta es solo la forma más simple de hacerlo.
function First() { const [Difficulty, setdifficulty] = useState(1); return ( <> {Difficulty !== 1 ? ( <div onClick={(e) => setdifficulty(1)}>Easy</div> ) : ( <div>Easy</div> )} {Difficulty !== 2 ? ( <div onClick={(e) => setdifficulty(2)}>Medium</div> ) : ( <div>hard</div> )} <Second Difficulty={Difficulty} /> // You will have to import the second component into this page. And remove it from App </> ); } function Second(props) { const { Difficulty } = props; return ( <div> {Difficulty === 1 && <div>This game is going to be easy</div>} {Difficulty === 2 && <div>This game is going to be hard</div>} </div> ); } function App() { return ( <div> <First /> </div> ); }