I'm using Create React App as framework and trying to render the GameObject new Phaser.Game(gameConfig) as React component. I am able to render but it creates a duplicate Canvas object as shown below:
以下是我的游戏组件:
import Phaser from "phaser";
import React from "react";
export default class Game extends React.Component {
componentDidMount() {
const gameConfig: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
parent: 'game-container',
backgroundColor: '#EBEBEB',
width: 600,
height: 800
}
new Phaser.Game(gameConfig);
}
shouldComponentUpdate() {
return false;
}
render() {
return <div id='game-container' />
}
}
这就是我要渲染的地方:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Game from './game';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<Game />
</React.StrictMode>
);
reportWebVitals();
如何删除此副本？