javascript - React 中的匿名类

Question

我听说过匿名函数，但匿名类的概念对我来说是新的。例如，我们这里有一个 HOC，看起来像这样。

import React, { Component } from 'react';

const withClass = (WrappedComponent, className) => {
   return class extends Component {
     render () {
          return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
             </div>
         )
       }
   }
}

[问题]在这里，我无法理解这行 return class extends Component { 的含义(我知道来自 React 的 extends 组件，{component})

有人可以向我解释一下它的一般作用吗？如果描述非常模糊或简短，请告诉我。

Answer 1

Here, I am unable to understand meaning of this line return class extends Component {

Can someone explain me what it does generally?

它定义了一个没有名称的类，并从 withClass 函数返回它。

也就是说，它执行此操作，但全部在一个表达式中并且没有给类命名:

import React, { Component } from 'react';

const withClass = (WrappedComponent, className) => {
   class TheClass extends Component {
     render () {
          return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
             </div>
         )
       }
   }
   return TheClass;
}

你可以这样使用它:

const MyClass = withClass(SomeComponent, "foo");

...然后您可以像这样使用它:

<MyClass foo="bar"/>

...你会得到

<div className="foo">
    <SomeComponent foo="bar" />
</div>

...渲染时。