Question

import React, { Component } from 'react';
import Phaser from 'phaser';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.game = null;
    this.create = () => {
      this.game.stage.backgroundColor = '#124184';
    }
  }

  componentDidMount() {
    this.game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-target',
      {
        create: this.create
      }
    );

    console.log(this.create);
  }

  render() {
    return (
      <section id="phaser-target">
        hello there old friend
      </section>
    )
  }
}

所以我创建了Phaser游戏对象，在该组件执行了挂载方法，注意，我的html如下所示：

<body style="overflow: hidden;">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><section><section id="phaser-target">hello there old friend</section></section></div>

  <script type="text/javascript" src="/static/js/bundle.js"></script>

<canvas width="1024" height="768"></canvas></body>

画布正在目标元素的外部渲染。

而且，我的this.create函数实际上从未进入过那里。我console.log，但它永远不会进入。

我正在重新阅读代码，对我来说这都是有意义的，它应该可以工作，但是我不明白为什么它不是。

有人可以给我一些指导吗？

Answer 1

您没有提到您使用的Phaser版本，这很重要，因为多年来API发生了多次更改。

此答案假设您使用的是最新版本的Phaser（3.1.4）

```

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-parent',
    pixelArt: true,
    width: 800,
    height: 600,
    scene: {
        preload: this.preload.bind(this),
        create: this.create.bind(this)
    }
};

var game = new Phaser.Game(config);

```

将父级配置设置为您的相位父级ID。并且应该附加到正确的元素上。

我猜是问题在于Phaser没有检测到此问题，而是自动将其附加到文档主体元素上。

要正确调用create方法，您应该创建一个普通的ES6类方法：

create() {
//do stuff
}

现在您应该使用bind（this）来调用它：

this.create.bind(this)

，您应该阅读ES6类内部的React文档范围。这里有一节说明为什么绑定绑定对于事件是必需的，这与您在此处需要这样做的原因相同

https://reactjs.org/docs/handling-events.html

在React组件中渲染Phaser.io画布

1 个答案: