samedi 29 septembre 2018

Create React States Using Classes

I'm just starting with react. I've seen that most state are comprised of simple data such as object, string, numbers, etc... I was hoping to be able to use a renderless class to hold and control a state like this:

import React, { Component } from 'react';
import HumanPlayer from "./players/HumanPlayer";
import Money from "./Money";
import ComputerPlayer from "./players/ComputerPlayer";
import Deck from "./cards/Deck";
import HumanBoard from "./views/PlayerBoard";
import Score from "./views/Score";
import ComputerBoard from "./views/ComputerBoard";
import Controls from "./views/Controls";

class BlackJack extends Component {

  constructor(props) {
    super(props);
    const human = new HumanPlayer({
      money: new Money({
        currency: Money.USD,
        amount: 100
      })
    });

    super(human);
    const computer = new ComputerPlayer;

    this.state = {
      human: human,
      computer: computer,
      deck: new Deck
    };
  }

  render() {
    const me = this;

    return (
        <div className="BlackJack">
          BlackJack
          <HumanBoard player={me.state.human}/>
          <Score money={me.state.human.getTotal()}/>
          <ComputerBoard player={me.state.computer}/>
          <Controls/>
        </div>
    );
  }
}

export default BlackJack;

Is there a good way to do this or is this more of an anti-pattern?




Aucun commentaire:

Enregistrer un commentaire