如何在React中创建一个新对象实例？

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"}

那么在React和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中获取正确的日志记录？React内部如何处理函数？（键-值对？）我如何定义对象等？

- The worm

---

你实际上想要在这里实现什么？你可以定义一个函数并将其命名为 Card，然后在你的 ReactApp 类中像之前一样实例化它 new Card(rank, suit)。 - Enijar

看起来你在谈论一个组件？创建一个名为 Card 的组件，就像你之前创建 ReactApp 一样。 - Fabian Schultz

Answer 1

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

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

接下来，您可以将该模型导入到React组件中，如下所示：

import {Card} from './card'

- Jagadish Upadhyay

Answer 2

虽然有点晚了，但还是要说一下...

自从 React v16.8 引入了 Hooks 之后，建议使用函数式组件而不是类组件。

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，因为涉及到提升问题。 这里有一篇好的文章解释了为什么。

- Your Ad Here

---

使用“函数式”方法是否比“类”方法更有优势？ @jagadish提供了答案。 - benwl

Answer 3

如果您想定义仅包含数据的类，那么这只是一个ES6问题，而不是React特定的问题。简单的答案是要将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/ 以下是有关在React中使用ES5的信息：https://facebook.github.io/react/docs/react-without-es6.html

- pablochan