0
115
ViewsEscena de Phaser duplicada al integrarse con React
al incrustar este juego Phaser de una sola escena en la página de React, la escena se duplicó en dos. Y cada vez que se actualiza el código, se agregan 2 duplicados más en la página.
El componente del juego es el siguiente:
import MainScene from './scenes/MainScene.js'; import Phaser from 'phaser'; import React, { Component } from 'react' class Game extends Component { componentDidMount(){ const config = { width: 640, height: 1024, backgroundColor: '#333333', type: Phaser.AUTO, parent: 'phaser-game', scene: [MainScene] }; new Phaser.Game(config); } shouldComponentUpdate() { return false; } render() { return <div id="game" /> } } export default Game; aquí puede ver que se crean dos elementos de lienzo 
¡gracias de antemano!
1 answers
Answer question0
Supongo que el problema radica en el objeto de config , donde está configurando el parent en phaser-game . parent es la id del elemento DOM, donde se debe inyectar el lienzo. Si no se puede encontrar un elemento con esa id específica, se inyecta en la etiqueta del body .
Entonces, la solución es cambiar la propiedad principal de parent phaser-game a game , ya que parece ser la id del elemento, donde desea que se muestre el juego.
Solo para mostrar la conexión entre la propiedad parent y el elemento al que se refiere.
Aquí algo de código:
// ... componentDidMount(){ const config = { // ... // "id" of the parent DOM Element parent: 'game', // ... }; new Phaser.Game(config); } // ... render() { // parent DOM Element return <div id="game" /> } Actualizar:
el problema podría ser que el componentDidMount puede ejecutarse varias veces como se menciona en este artículo , dado que no conozco su código y no soy un experto en ReactJs, podría intentar consultar este artículo, cómo evitar llamadas múltiples del componentDidMount función.