如何编写扩展功能组件的 ES6 类 React 组件？

Posted 2023-02-19

【中文标题】如何编写扩展功能组件的 ES6 类 React 组件？

【英文标题】：How to write an ES6 class React Component that extends a functional component?

【发布时间】：2017-05-27 00:33:10

【问题描述】：

我知道在原版 ES6 中你可以写一个 class 那个 extends 一个函数类。这是解释here。

React 支持 ES6 类组件，通过 extending React.Component 和功能组件。不过，在尝试 extend 功能组件时，我遇到了以下错误。

TypeError: Cannot call a class as a function

我正在尝试编写一些扩展组件的代码并且适用于 ES6 类组件和功能组件。我想编写一个返回组件的函数，但我只想扩展和修改一些道具，而不是更高阶的组件。

下面是一些我尝试过但不起作用的示例代码。这可能吗？我意识到BarExtended 根本不会渲染Bar，但我只是在测试。除非这是问题的一部分。

function Bar() 
    return (
    <h1>Bar</h1>
  );


class BarExtended extends Bar 
    render() 
    return (
        <h1>BarExtended</h1>
    );
  


ReactDOM.render(
    <div>
    <BarExtended />
    </div>,
  document.getElementById("foo")
);

【问题讨论】：

React 推荐组合而不是继承。函数可以很容易地组合，所以如果你放弃继承，你的问题就会消失。

【参考方案1】：

警告这至少据我所知在 react 方面是不可能的，因为你需要从 React.Component 继承以使其成为一个 react 组件，所以 bar 只是一个函数。

class Bar extends React.Component 

您不必使用带有 react 的类，您可以使用常规函数。但我认为您正在寻找的是高阶组件。这可以为您传递给它的任何组件提供额外的功能。

function Bar(WrappedComponent)
 return class BarExtended extends React.Component 
  addThisFunction()
    console.log('I extended the wrapped component with functionality')
  
  render (
    return (
     <WrappedComponent addThisFunction=this.addThisFunction/>
    )
  )
 

如果你真的想从常规课程中学习，你可以这样做。 这直接来自类文档。

function Animal (name) 
  this.name = name;  


Animal.prototype.speak = function () 
  console.log(this.name + ' makes a noise.');


class Dog extends Animal 
  speak() 
    console.log(this.name + ' barks.');
  


var d = new Dog('Mitzie');
d.speak();

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Classes

【讨论】：

能否添加一个关于如何使用 Bar 功能组件的示例？您将如何将 WrappedComponent 作为道具传递？

【参考方案2】：

嗯..我认为这根本没有意义。

函数式组件只是一个函数，你知道，渲染函数。 所以扩展一个功能组件意味着你将覆盖渲染函数，并且......这意味着你覆盖整个功能组件（因为它只是一个渲染函数），然后你扩展 nothing。

【讨论】：

从技术上讲，它在扩展时不会被渲染函数覆盖。它就像一个构造函数，所以如果他的Bar 函数看起来像这样function Bar() console.log("Hello"); ，它会在创建BarExtended 的实例时向控制台输出'Hello'。所以它确实扩展了一些东西，它只是不能作为一个反应组件工作，因为它没有扩展 React.Component。

这实际上是有道理的，因为在某些情况下，您希望为同一个组件创建两个不同的文件。一个用于反应，第二个用于反应原生。您可以通过具有所有逻辑的基本组件来扩展它们。因此，在这种情况下，您可能有一个用于渲染的功能组件，但有一个用于逻辑的类组件。