2016-12-09 6 views
2

Очевидно, что в нормальных JS я могу сделать этоКак создать новый экземпляр объекта в реале?

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

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

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

Так как же я могу это сделать в среагировать и ES6 земли?

Я пытался что-то вроде этого:

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

} 

(не показывая метод отрисовки сейчас)

, но как я могу получить, чтобы войти в правильную вещь в реагировать? как функции обрабатываются внутри React? (пары ключевых значений?) и как я могу определить объекты и т. д.?

+0

Что вы на самом деле пытаетесь достичь здесь? Вы можете просто определить функцию и назвать ее «Картой», а затем в вашем классе «ReactApp» создать экземпляр так, как будто вы делали перед «новой картой (ранг, костюм)». – Enijar

+0

Похоже, вы говорите о компоненте? Создайте компонент под названием «Карта», как и с «ReactApp». –

ответ

2

Если вы задаете вопрос об определении классов, содержащих только данные, то это просто проблема ES6, а не конкретная реакция. Простым ответом является объявление класса Card отдельно от вашего компонента, например. г.

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

class ReactApp extends React.Component{ ... } 

Другой способ решить эту проблему, чтобы просто использовать ES5 (так называемый «нормальный JavaScript»), так как я предполагаю, что вы больше знакомы с ним. Использование React не заставляет вас использовать ES6.

Вот список полезных статей о ES6: https://hacks.mozilla.org/category/es6-in-depth/

А вот информация об использовании ES5 в React: https://facebook.github.io/react/docs/react-without-es6.html

1

Если вы ищете модель карты вы можете создать новый класс ES6 для этого

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

После этого, вы можете импортировать эту модель в реакцию компонент, как

import {Card} from './card'