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

时间:2017-01-12 02:17:39

标签: javascript reactjs ecmascript-6

我知道在vanilla ES6中你可以写一个classextend是一个功能类。这解释为here

React支持ES6类组件,通过extend ing 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")
);

2 个答案:

答案 0 :(得分:2)

警告至少就我的知识而言,这并不是真的可行,因为你需要从React.Component继承它以使它成为反应组件,因此bar只是一个函数。

class Bar extends React.Component {

}

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

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

答案 1 :(得分:1)

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

功能组件只是一个功能,你知道,一个渲染功能 因此扩展一个功能组件意味着你将覆盖渲染功能,并且......它意味着你覆盖整个功能组件(因为它只是一个渲染功能),然后你扩展 nothing