Para que un Zombie lance un ataque, el entrenador de dicho zombie debe decidir el movimiento deseado de la lista de movimientos que el Zombie ha aprendido. Una vez que el entrenador selecciona el movimiento que el zombi debe usar, esta información debe ser pasada al componente de GameMgr. Pero, ¿cómo puede el componente hijo (Zombie en nuestro caso) pasar esa información al componente padre (GameMgr)?
El enfoque simple y directo (y bastante popular) para hacerlo es pasar una función que se comportará como una llamada de retorno. El método necesita recibir la información que el niño necesita para pasar al padre como argumentos.
Fíjate en el método getAttack en el código de abajo. La firma del método indica que incluye dos parámetros. El mismo método se pasa más tarde como apoyo del componente hijo sin argumentos.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869importReact,{Componente}de$0027reaccionar$0027;importarZombide$0027.. /Zombie$0027;constHumbug={ nombre:$0027Humbug$0027, nivel:5, hp:20, tipo:$0027cpu$0027, moves:{ move_1:{ nombre: "Tackle", power:4}, move_2:{ nombre: "Growl", power:0}}}claseGameMgrextendsComponent{constructor(props){super(props);this. state={}}getAttack=(zombie, move)={{i};{let newState=este.state; newState ={ attack:{ zombie: zombie, move: move.name}} esto. setState(newState);}showMessage=()={si(este.estado.ataca){regresa(<div>p>{`${este.estado.ataca.zombie} usa ${este.estado.ataca.mueve}! `}</promedio;)}retorno;}render(){retorno(|división)};Tipo de zombi=$0027jugador$0027 name={"Geek"} level={6} hp={11} moves={{{move_1:{nombre: "Scratch", power:5}, move_2:{nombre: "Leer", power:0}}} sendAttack={this. getAttack.bind(this)};|Zombie(s);};Zombie(s);} sendAttack={this.getAttack.bind(this)};
javascript
Si te parece un poco extraño, echa un vistazo al componente Zombie después del ajuste.
1234567891011121314151617181920212223242526272829importReact,{Componente}de$0027react$0027;classZombieextendsComponente{attack=(move)={;{esta.props.sendAttack(this.props.name, move);}render(){return(<div><h1>Zmb:{this. nombre.props}</h1;};ul estilo={{{{listStyle:$0027none$0027}};}[span];Nivel:{este.props.level}</span hp}</span>/li>/ul;²ul estilo={{{{listStyle:$0027none$0027}{{{i}};botón enClick={()={i};este.ataque(esto. props.moves.move_1)};{esto.props.moves.move_1.name}</botón attack(this.props.moves.move_2)};};{this.props.moves.move_2. nombre}</botón};;li>;span;-</span
javascript
Aquí tenemos un nuevo método de ataque que, al ser ejecutado, llama al mismo método que se pasó antes un puntal del componente Zombi. Sin embargo, ahora el método incluye dos argumentos: el nombre del zombi (que es, a su vez, un accesorio del componente) y el objeto de ataque elegido.
Además, para que el proceso sea más atractivo, el método de devolución de llamada del evento onClick se ajusta al método de ataque en los botones de abajo. Cuando un usuario hace clic en el botón para seleccionar un ataque, se llama al método adjunto (ataque en nuestro caso).
El único trabajo del método de ataque es llamar al getAttack del componente GameMgr. Ahora el nombre del zombi junto con el ataque seleccionado por su entrenador se pasa al componente padre por medio de esa función.
Esta información se almacena en el estado de GameMgr. El método de renderización se disparará de nuevo una vez que se cambie el estado, mostrando así el mensaje que el método showMessage produjo. Como la información pasada se almacenó en el estado, se deduce que todos los métodos que lo utilizan tendrán acceso a dicha información (nombre del zombi y el ataque seleccionado).
Para mantenerlo simple, el método showMessage sólo mostrará un mensaje que contenga el nombre del zombi y el nombre de su ataque.
Por lo tanto, podemos realizar operaciones más complejas pasando métodos al componente infantil y almacenando los datos pasados del niño al estado del padre, por ejemplo, pasando información sobre el ataque al zombi que recibirá el golpe junto con el daño a sus puntos de golpe, o, si ese zombi tiene suerte, el hecho de que el defensor evitará el golpe.
Y así es como el componente infantil (Zombie) pasó datos a su padre (GameMgr).