Skip to content

How to inject existing react tree with reactPhaser.render ? #7

@kevzettler

Description

@kevzettler

The fact that this library encourages overridingReact.createClass and React.render is really confusing.

Say I have an existing react app wired up with react-router and stuff. I'm trying to render a phaser game on a react-router route. like /game that route is bound to a simple component

import React from 'react';

const GameContainer = React.createClass({
  render: function(){
    return (
        <div className="game-page">
          <div className="phaser-container"></div>
        </div>
    );
  }
});

export default GameContainer;

I now want to hook this component up to react-phaser what do I do?

import React from 'react';
import ReactPhaser, { game } from 'react-phaser';

const MyGame = ReactPhaser.createClass({
  render: function(){
    return <game />;
  }
});

const GameContainer = React.createClass({
  componentDidMount: function(){
    ReactPhaser.render(<MyGame />, 'phaser-container');
  },

  render: function(){
    return (
        <div className="game-page">
          <div className="phaser-container"></div>
        </div>
    );
  }
});

export default GameContainer;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions