Question

显然在普通的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中处理函数？（键值对？）以及如何定义对象等？

Answer 1

如果您要求定义仅包含数据的类，那么它只是一个ES6问题，而不是特定于React的问题。简单的答案是将Card类与组件分开声明，e。克。

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

class ReactApp extends React.Component{ ... }

解决这个问题的另一种方法是简单地使用ES5（又名＆＃34;普通的javascript＆＃34;），因为我认为你对它更熟悉。使用React不会强迫您使用ES6。

以下是有关ES6的有用文章列表：https://hacks.mozilla.org/category/es6-in-depth/

以下是有关在React中使用ES5的信息：https://facebook.github.io/react/docs/react-without-es6.html

Answer 2

如果您正在寻找卡片模型，您可以为此创建一个新的ES6课程

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

在此之后，您可以将该模型导入到反应组件中

import {Card} from './card'

Answer 3

有点晚了，但仍然......

自从 React v16.8 引入钩子以来，建议使用函数组件而不是类组件。

const Card = function(rank, suit) {
    const rank = rank;
    const suit = suit;
    return { rank, suit };
};

const cardOne = Card("3", "H");

cardOne; // {rank: "3", suit: "H"}
cardOne.rank; // "3"
cardOne.suit; // "H"

但这有点老式。使用箭头函数在一行代码中执行此操作的最优雅方法：

const Card = (rank, suit) => { return { rank: rank, suit: suit } }

仅此而已。不是你可以分配你的变量。

const cardOne = Card('3', 'H')

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

您还可以在常量前添加 export 以使其可从任何地方导入：

// components.js
export const Card = (rank, suit) => { return { rank: rank, suit: suit } }


// App.js
import { Card } from './components'

const cardTwo = Card('2', 'F')
cardTwo // {rank: "2", suit: "F"}
cardTwo.rank // "2"
cardTwo.suit // "F"

此外，由于提升，您最好使用 const 和 let 来声明变量而不是 var。 Here 是一篇很好的文章，解释了原因。

如何在React中创建一个新的Object实例？

3 个答案: