Wie erstellt man eine neue Instanz eines Objekts in React?

Question

Offensichtlich in normalen JS kann ich dies tun

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

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

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

Wie sollte ich das tun in reagieren und ES6 Land?

Ich habe so etwas wie dies versucht:

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

} 

(nicht Methode machen jetzt zeigt)

aber wie kann ich das bekommen in reagieren die richtige Sache zu protokollieren? Wie werden Funktionen in React behandelt? (Schlüsselwertpaare?) und wie definiere ich Objekte?

Answer 1

Wenn Sie nach Klassen suchen, die nur Daten enthalten, dann handelt es sich nur um ein ES6-Problem, nicht um ein reaktionsspezifisches. Die einfache Antwort ist, die Klasse Card separat von Ihrer Komponente zu deklarieren, z. G.

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

class ReactApp extends React.Component{ ... } 

Eine weitere Möglichkeit, dieses Problem zu lösen, ist einfach ES5 verwenden (auch bekannt als „normal javascript“), da ich, dass Sie mit ihm vertrauten nehmen. Die Verwendung von React erzwingt nicht die Verwendung von ES6.

Hier ist eine Liste von nützlichen Artikeln über ES6: https://hacks.mozilla.org/category/es6-in-depth/

Und hier Informationen über ES5 mit in Reaktion: https://facebook.github.io/react/docs/react-without-es6.html

Answer 2

Wenn Sie Kartenmodell suchen Sie eine neue ES6 Klasse für diese

erstellen

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

Danach können Sie dieses Modell importieren in die Komponente reagieren als

import {Card} from './card'