0

我正在 reactjs 中使用 matter.js 制作游戏。

我遇到了一个问题，我无法在 render() 中返回任何内容。

可能这是因为 matter.js 有自己的渲染器。

所以我没有在渲染部分重新调整任何内容。

如果我在渲染部分没有返回任何内容，则 componentDidMount 不要运行。

我无法运行 componentDidMount() 并且即使绑定它也无法调用任何函数。

我正在调用 start_game() 函数来开始游戏，但是我在 start_game() 中调用的任何其他函数都会出现错误，表明即使我在类中声明了它也不存在这样的函数。

import React, { Component } from 'react';
import Matter from 'matter-js';
const World = Matter.World;
const Engine = Matter.Engine;
const Renderer = Matter.Render;
const Bodies = Matter.Bodies;
const Events = Matter.Events;
const Mouse = Matter.Mouse;
const MouseConstraint = Matter.MouseConstraint;
const Body = Matter.Body;

class Walley extends Component
{
    constructor(props)
    {
        super(props);

        this.world = World;
        this.bodies = Bodies;
        this.engine = Engine.create(
            {
                options:
                    {
                        gravity: { x: 0, y: 0,}
                    }
            });
        this.renderer = Renderer.create(
            {   element: document.getElementById('root'),
                engine: this.engine,
                options:
                    {
                        width: window.innerWidth,
                        height: window.innerHeight,
                        background: 'black',
                        wireframes: false,
                    }
            });

         this.state = {
            play_game: false,
            score:0,
                };


        this.play_game=this.play_game.bind(this);
    }

    play_game(){

            this.setState
            ({
                score: 50,
            });

        }

    startGame()
    {

        console.log(this.state.play_game);
        //don't know how here the value of play_game is set to true even it was false in componentWillMount()
        if(this.state.play_game){
            this.play_game();
         //unable to access play_game
        }

    }
    componentWillMount()
    {
        if (confirm("You want to start game?"))
        {   
            this.setState({play_game: true});
        }
        console.log(this.state.play_game);
        //even though play_game is set true above yet output at this console.log remains false
    }

    render()
    {
        if(this.state.play_game)
        this.startGame();
    }

    componentDidMount()
    {
        //unable to access
        console.log('Did Mount');
    }
}

export default Walley;

4

1 回答 1

0

render需要是一个纯函数，这意味着你不应该startGame从内部调用render。我想你想要更接近这个的东西：

// remove this
// componentWillMount() {}

componentDidMount() {
  if (confirm("You want to start game?")) {   
    this.setState({play_game: true}, () => {
      console.log(this.state.play_game);
    });
    startGame();
  }
}

render() {
  // eventually you will want to return a div where you can put your matter.js output
  return null;
}
于 2017-03-21T18:05:04.250 回答