reactjs - 将 Phaser 与 React 结合使用

Question

我试图了解如何在 React 应用程序中使用 React 渲染所有 UI 元素，并使用 Phaser 渲染游戏(使用 Canvas 或 WebGL)。

一种方法是使用 React 的 componentDidMount，因此在准备好 HTML 后，我可以使用 div id 来呈现 Phaser 内容。在这种情况下，谁来渲染？ Phaser 的 react ？

如果上述方法不正确，您能建议另一种方法吗？

Answer 1

Github 上有一个用于此目的的模块称为react-phaser。这是CodePen不使用任何单独的模块。

var PhaserContainer = React.createClass({

    game: null,
    ...
    componentDidMount: function(){
        this.game = new Phaser.Game(800, 400, Phaser.AUTO, "phaser-container", 
        { 
            create: this.create,
            update: this.update
        });
    },
    ...
    render: function(){
        return (
            <div className="phaserContainer" id="phaser-container">
            </div>
        );
    }
    ...
}

这不是我的 CodePen。信用归Matthias.R