Sé que en Vanilla ES6 puedes escribir una class que extend a una clase funcional. Esto se explica aquí .
React es compatible con los componentes de la clase ES6, a través de la extend de React.Component y componentes funcionales. Sin embargo, recibo el siguiente error cuando intento extend un componente funcional.
TypeError: Cannot call a class as a functionEstoy tratando de escribir un código que amplíe un componente y funcione tanto para componentes de clase ES6 como para componentes funcionales. Quiero escribir una función que devuelva un componente, pero en lugar de un componente de orden superior, solo quiero extender y modificar algunos accesorios.
A continuación se muestra un código de ejemplo que he probado y no funciona. es posible? Me doy cuenta de que BarExtended no renderizaría Bar en absoluto, pero solo estaba probando. A menos que esto sea parte del problema.
function Bar() { return ( <h1>Bar</h1> ); } class BarExtended extends Bar { render() { return ( <h1>BarExtended</h1> ); } } ReactDOM.render( <div> <BarExtended /> </div>, document.getElementById("foo") );Advertencia, esto no es realmente posible, al menos que yo sepa, en términos de reacción, porque necesita heredar de React.Component para convertirlo en un componente de reacción, por lo que la barra es solo una función.
class Bar extends React.Component { }No tiene que usar clases con reaccionar, puede usar funciones regulares. Pero creo que lo que estás buscando son componentes de orden superior. Lo que puede brindarle funcionalidad adicional a cualquier componente que le pase.
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}/> ) ) } }Sin embargo, puedes hacer esto si realmente quieres de las clases regulares. Esto es correcto de la documentación de las clases.
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
Um... Creo que no tiene ningún sentido.
Un componente funcional es solo una función, ya sabes, una función de representación .
Entonces, extender un componente funcional significa que anulará la función de renderizado, y... significa que anulará todo el componente funcional (porque es solo una función de renderizado), luego no extenderá nada .