Как использовать метод одного класса в компоненте реакции?

Question

Я создаю игру в покер, и у меня есть класс колоды карт, в которой есть методы getDeck, getCard и getCards (howMany) и компонент Card.Мне нужно использовать метод CardDeck в App, потому что мне нужно сохранить колоду в состоянии, чтобы склеить уже использованные карты и создать новую колоду после использования 52 карт.У меня есть кнопка, которая генерирует новые 5 карт (рука), и мне нужна еще одна, чтобы сгенерировать новую колоду.

это мой 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>
    );
  }
  }

это мой CardDeckкласс:

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

}

компонент моей карты:

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

Заранее спасибо.

Answer 1

Проблема, которую я вижу здесь, заключается в том, что вы не создаете экземпляр класса, для которого пытаетесь получить доступ к методу.CardDeck - это другой класс, чтобы использовать его метод, обычно вам нужно создать новый экземпляр CardDeck, как написал DILEEP THOMAS в своем ответе.

Если вы не хотите создавать экземпляр new CardDeck()затем сделайте ваш getCards метод static примерно так: static getCards = howMany => { // code }.Таким образом, вы можете получить доступ к этому методу вне его класса, не создавая новый экземпляр этого класса.

Answer 2

так как вы используете класс, вам нужно взять экземпляр класса.

, поэтому замените его приведенным ниже фрагментом.Я надеюсь, что это решит проблему

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