Question

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

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

然后我们有特定的类，例如PetrolEngine和DieselEngine

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这样的新组件。有没有一种方法可以将此写为功能组件，而又不影响现有的基于类的组件。

是的，我知道组合应该是更好的方法，而不是继承。但这就是它。

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将允许您覆盖render组件的Engine方法，以便您可以渲染{{1 }}特定的JSX。

但是，这种感觉并不十分正确，看起来也不是太好，而且正如您所说，在这里构图将是一种更好的方法。

如果您想扩展父组件的某些功能，我可能会坚持使用ElectricEngine，因为在您的特定情况下使用父组件要容易得多。

在功能组件中使用类的隐式函数

1 个答案: