在函数组件中使用类中的固有函数

Question

我当前的企业代码具有基类和功能特定组件的概念

class Engine extends Component {
render(){
this.renderEngine();
}
}

然后我们有特定的类别，如石油发动机和柴油发动机

class PetrolEngine extends Engine {
makeLessSound(){
console.log('Silence');
}
consumeMoreFuel(){
console.log('Gobble up!')
}
renderEngine(){
this.makeLessSound();
this.consumeMoreFuel()
}
}
class DieselEngine extends Engine {
makeMoreSound(){
console.log('Grrr!');
}
consumeLessFuel(){
console.log('Dieting!')
}
renderEngine(){
this.makeMoreSound();
this.consumeLessFuel()
}
}

现在我想创建一个像ElectricEngine这样的新组件。有没有一种方法可以在不影响现有基于类的组件的情况下将其作为一个功能组件来编写。

是的，我知道Composition应该是更好的方法，而不是继承。但事实就是这样。

Answer 1

这肯定是可能的，因为类只是现有的基于原型的继承的语法糖。

class Engine extends React.Component {
renderEngine = () => {
return null;
};
render() {
return this.renderEngine();
}
}
function ElectricEngine() {}
ElectricEngine.prototype = new Engine();
ElectricEngine.prototype.constructor = Engine;
ElectricEngine.prototype.makeLessSound = function() {
return <p>Making less sound!</p>;
};
ElectricEngine.prototype.consumeMoreFuel = function() {
return <p>Consuming less fuel</p>;
};
ElectricEngine.prototype.renderEngine = function() {
return (
<div>
<h3>ElectricEngine</h3>
{this.makeLessSound()}
{this.consumeMoreFuel()}
</div>
);
};
ReactDOM.render(
<ElectricEngine />,
document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

ElectricEngine.prototype = Object.create(Engine.prototype)等效于ElectricEngine extends Engine，ElectricEngine.prototype.render将允许您重写Engine组件的render方法，以便您可以呈现ElectricEngine特定的JSX。

然而，这感觉不太好，看起来也不太好。正如你所说，构图是一种更好的方法。

如果您想从父组件扩展一些功能，我可能会坚持使用class-based components，因为在您的特定情况下使用它们要容易得多。