web-dev-qa-db-ja.com

Reactでオブジェクトの新しいインスタンスを作成する方法は？

明らかに通常の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);
  };

}

（現時点ではrenderメソッドを表示していません）

しかし、どうすればreactで正しいことを記録することができますか？ React内で関数はどのように扱われますか？ （キーと値のペア？）およびオブジェクトなどを定義するにはどうすればよいですか？

javascriptfunctionoopobjectreactjs
8
The worm

カードモデルを探している場合は、そのための新しいES6クラスを作成できます

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

この後、そのモデルをreactコンポーネントにインポートできます

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

データのみを含むクラスの定義について質問している場合、それはReact特定の問題ではなく、ES6の問題です。簡単な答えはCardクラスを個別に宣言することですコンポーネントから、例えば.

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

class ReactApp extends React.Component{ ... }

この問題を解決するもう1つの方法は、ES5（別名「通常のjavascript」）を使用することです。これは、皆さんがこれに詳しいことを前提としているためです。 Reactを使用しても、ES6を強制的に使用することはありません。

ES6に関する有用な記事のリストを次に示します。 https://hacks.mozilla.org/category/es6-in-depth/

そして、ReactでのES5の使用に関する情報は次のとおりです。 https://facebook.github.io/react/docs/react-without-es6.html

3
pablochan