Jetez un coup d'œil sur " this.state.winners.winners strong>": Exemple de résultats: strong> p> John
Emperor (is winner)
King (is winner)
4 Réponses :
Changer votre vérifier sur stackblitz: Addplayer (lecteur) Pour vérifier si le lecteur est gagnant comme ci-dessous:
J'utiliserais uid au lieu de nom
@kip, c'était juste un indice pour lui de le faire aller, mais l'a changé en uid au cas où l'UID est unique.
Oui, je cherchais exactement ce code! C'était parfait. Merci Monsieur
Vous allez ici:
import React, { Component } from "react";
const playingPlayers = [
{uid: 1, name: 'John'},
{uid: 2, name: 'Emperor'},
{uid: 3, name: 'King'}
];
class Queue extends Component {
constructor(props) {
super(props);
this.state = {
winners: this.props.winners
}
}
checkWinner(uid){
var status = '';
for (let winner of this.state.winners) {
if (winner.uid === uid) {
status = '(winner)'; //change whatever message you want here
break;
}
}
return status;
}
addPlayer(player){
return (
<div>
<li>{player.name} {this.checkWinner(player.uid)}</li>
</div>
);
}
render(){
return (
<React.Fragment>
{playingPlayers.map(player =>
this.addPlayer(player)
)
}
</React.Fragment>
);
}
}
export default Queue;
Vous pouvez essorer essentiellement vérifier les uuids pour comparer qui sont les gagnants. Voici le lien que vous pouvez vérifier en cours de démonstration, j'ai fait le gagnant dans un format audacieux pour que vous puissiez voir, vous pouvez modifier la logique à tout ce que vous voulez https://react-7sd9h7.stackblitz.io
Aucun problème. Veuillez uppoter si vous pensez que la réponse pourrait être utile pour les autres @Carolinaramirez
ajoutez le gagnant code> enregistrement Addplayer code> et effectuez l'affichage conditionnel de la chaîne. (De la même manière que vous pouvez faire avec des styles). function addPlayer(player) {
const winners = [2, 3];
return (
<div>
<li>{`${player.name}${
winners.includes(player.uid) ? " (is Winner)" : ""
}`}</li>
</div>
);
}