javascript 如何编写一个扩展函数组件的ES6类React组件？

13z8s7eq 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(87)

我知道在vanilla ES6中你可以写一个class，extend是一个function类。这在这里解释。
React通过extend和React.Component支持ES6类组件和函数组件。但是，当我尝试extend一个函数组件时，我得到了以下错误。

TypeError: Cannot call a class as a function

我正在尝试编写一些扩展组件的代码，适用于ES6类组件和函数组件。我想写一个函数返回一个组件，但不是一个更高阶的组件，我只是想扩展和修改一些 prop 。
下面是一些示例代码，我已经尝试过，不工作。这可能吗？我意识到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")
);

JavaScript

来源：https://stackoverflow.com/questions/41604075/how-to-write-an-es6-class-react-component-that-extends-a-function-component

2条答案

按热度按时间

7nbnzgx91#

警告，至少就我所知，这在react方面是不可能的，因为你需要继承React.Component，使其成为一个react组件，就像so 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

赞(0）回复(0）举报 12个月前

vvppvyoh2#

嗯……我觉得这完全说不通。
一个功能组件只是一个函数，你知道，一个渲染函数。
所以扩展一个函数组件意味着你将覆盖render函数，并且..这意味着你覆盖了整个函数组件（因为它只是一个渲染函数），然后你扩展了 nothing。

赞(0）回复(0）举报 12个月前