[英]How to use a component's method to alter an object in another component? [React]
[英]How to use one class's method in react component?
我正在創建一個撲克游戲,我有一個卡片組類,它具有方法 getDeck、getCard 和 getCards(howMany) 以及一個 Card 組件。 我需要在App中使用CardDeck的方法,因為我需要在狀態下保存一副牌,把已經用過的牌拼接起來,用完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>
);
}
}
提前致謝。
由於您使用的是類,因此您需要獲取類的實例。
所以用下面的代碼片段替換。 我希望這能解決問題
//App.js
constructor() {
super();
let carDeck = new CardDeck()
this.state = {
display: false,
cards: carDeck.getCards(5)
}
}
我在這里看到的問題是您沒有創建您嘗試訪問其方法的類的實例。 CardDeck
是另一個類,通常你需要做的新實例,使用它的方法CardDeck
像迪利普·托馬斯寫在他的回答。
如果你不希望實例化一個new CardDeck()
然后讓你的getCards
方法static
像這樣: static getCards = howMany => { // code }
。 通過這種方式,您可以在類之外訪問此方法,而無需創建該類的新實例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.