如何在反应组件中使用一个类的方法？

Question

I'm creating a poker game and I have a Card deck class which has methods getDeck, getCard and getCards(howMany) and a Card component. I need to use CardDeck's method in App, because I need to save the deck in state to splice already used cards and generate new deck after 52 cards are used. I've got a button that generates new 5 cards (a hand) and I need another one to generate new deck.

this is my app.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      display: false,
      cards: CardDeck.getCards(5)
    }
  }
  displayDeck = () => {
    this.setState({display: true});
  }
  render() {
    return (
      <div>
        <button className='btn' onClick={this.displayDeck}>Button</button>
        {this.state.display ?
           <div className="App playingCards fourColours faceImages">
           <Card rank={this.state.cards[0].rank} suit={this.state.cards[0].suit} />
           <Card rank={this.state.cards[1].rank} suit={this.state.cards[1].suit} />
           <Card rank={this.state.cards[2].rank} suit={this.state.cards[2].suit} />
           <Card rank={this.state.cards[3].rank} suit={this.state.cards[3].suit} />
           <Card rank={this.state.cards[4].rank} suit={this.state.cards[4].suit} />
         </div> :
           null
        }
      </div>
    );
  }
  }

this is my CardDeck class:

let getRandomInt = (min, max) => {    
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
class CardDeck {
    constructor () {
        this.deck = this.getDeck();
    }
    getDeck = () => {
        const suits = ['hearts', 'diams', 'clubs', 'spades'];
        const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'j', 'q', 'k', 'a'];
        let currentDeck = [];
        for (let suit of suits) {
            for (let rank of ranks) {
                let card = {suit: suit, rank: rank};
                currentDeck.push(card);
            }
        }
        return currentDeck;
    }
    getCard = () => {
        let min = 0;
        let max = 52;
        let card;
        while (card === undefined) {
            let number = getRandomInt(min, max);
            card = this.deck[number];
            this.deck.splice(number, 1);
        }
        return card;
    }
    getCards = howMany => {
        let cardsArray = [];
        for (let i=0; i < howMany; i++) {
            let card = this.getCard();
            cardsArray.push(card);
        }
        return cardsArray;
    }

}

my Card component:

class Card extends Component {
    render(props) {
        const suits = {
            diams: '♦',
            hearts: '♥',
            clubs: '♣',
            spades: '♠'
        };
        const ranks = {
            'q': 'Q',
            'j': 'J',
            'k': 'K',
            'a': 'A',
            '2': '2',
            '3': '3',
            '4': '4',
            '5': '5',
            '6': '6',
            '7': '7',
            '8': '8',
            '9': '9',
            '10': '10'
        }
        var  classNames = "card " +  "rank-" + this.props.rank + " " + this.props.suit;
        return (
            <div className={classNames}>
                <span className="rank">{ranks[this.props.rank]}</span>
                <span className="suit">{suits[this.props.suit]}</span>
            </div>
        );
    }
}

Thanks in advance.

Answer 1

since you are using a class , you need to take instance of the class.

so replace with the below snippet. I hope this will solve the issue

//App.js
    constructor() {
        super();
        let carDeck = new CardDeck()
        this.state = {
          display: false,
          cards: carDeck.getCards(5)
        }
      }

Answer 2

The issue I see here is you are not making an instance of the class you are trying to access the method for. CardDeck is another class, to use it's method usually you need to make a new instance of CardDeck like DILEEP THOMAS has written in his answer.

If you don't want to instantiate a new CardDeck() then make your getCards method static like so: static getCards = howMany => { // code } . This way you can access this method outside of it's class without creating a new instance of that class.