在 props 上使用 js 类 react

Question

我正在研究一个爱好反应，我有一个问题。

许多人在使用 react 时为组件创建了一个函数，它工作得很好。他们使用 (probs) 来指定组件的每个“子”，如下所示：

function Foo(probs) {
    // react stuff with those probs
}

效果很好，但你知道我想要什么吗？面向对象编程！

因此，我没有为每个类创建函数并在主函数中指定它们，而是为我的每个组件创建一个类，如下所示：

import React from "react";
import ReactDOM from "react-dom";

const firstbook = {
  title: "some title",
  autor: "someone",
  img: "some url",
};

function Booklist() {
  return (
    <div>
      {new Book(firstbook)}
    </div>
  );
}

class Book {
  constructor(data) {
    this.title = data.title;
    this.autor = data.autor;
    this.img = data.img;

    return (
      <div className="book">
        <h1>{this.title}</h1>
        <h2>{this.autor}</h2>
        <img src={this.img} alt=""></img>
      </div>
    );
  }
}

function render() {
  ReactDOM.render(<Booklist />, document.getElementById("root"));
}
render();

问题是，可以吗？我不太了解反应，我害怕在处理时遇到一些问题。或者不能对每个组件都这样做。 请帮我找出来！顺便说一句，对不起我的英语不好。

Answer 1

对于 JavaScript，您使用类或函数式组件没有区别，没关系。但是对于地球人来说，面对这两种方式来创建组件是相当麻烦的。更好地使用功能，因为它更现代。如果您还没有听说过 ES6，请尝试滥用它。总之祝你学习顺利！