web-dev-qa-db-fra.com

Comment créer une nouvelle instance d'un objet dans React?

De toute évidence, dans JS normal, je peux le faire

var Card = function(rank, suit){
    this.rank = rank; 
    this.suit = suit
  }

var cardOne = new Card('3', 'H');

cardOne // Card {rank: "3", suit: "H"}

Alors, comment ferais-je pour réagir et ES6 atterrir?

J'ai essayé quelque chose comme ça:

class ReactApp extends React.Component{

  Card = (rank, suit) => {
    this.rank = rank;
    this.suit = suit;
  };

  createCard = () => {
    let CardObj = {};
    let card = new this.Card('3', 'Hearts');
    console.log(card);
  };

}

(ne montre pas la méthode de rendu pour l'instant)

mais comment puis-je obtenir cela pour enregistrer la bonne chose en réaction? comment les fonctions sont-elles traitées dans React? (paires de valeurs clés?) et comment définir des objets, etc.?

javascriptfunctionoopobjectreactjs
8
The worm

Si vous cherchez un modèle de carte, vous pouvez créer une nouvelle classe ES6 pour cela

export class Card {
  constructor(rank, suit) {
    this.rank = rank;
    this.suit = suit;
  }
}

Après cela, vous pouvez importer ce modèle dans le composant React en tant que

import {Card} from './card'
7
Jagadish Upadhyay

Si vous posez des questions sur la définition de classes qui contiennent uniquement des données, il s'agit simplement d'un problème ES6, pas d'un problème spécifique React. La réponse simple est de déclarer la classe Card séparément de votre composant, par exemple.

class Card {
  constructor(rank, suit) {
    this.rank = rank;
    this.suit = suit;
  }
}

class ReactApp extends React.Component{ ... }

Une autre façon de résoudre ce problème est d'utiliser simplement ES5 (alias "javascript normal"), car je suppose que vous le connaissez mieux. L'utilisation de React ne vous oblige pas à utiliser ES6.

Voici une liste d'articles utiles sur ES6: https://hacks.mozilla.org/category/es6-in-depth/

Et voici des informations sur l'utilisation d'ES5 dans React: https://facebook.github.io/react/docs/react-without-es6.html

3
pablochan