Question

我正在使用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;

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;

Answer 1

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;
}

ComponentDidMount（）不起作用

1 个答案: