无法覆盖 React 中的方法答案

【问题标题】：Cannot Override A Method In React无法覆盖 React 中的方法
【发布时间】：2018-01-08 15:37:09
【问题描述】：

我有两个组件：

var A = React.createClass( {

   doSomething: function() { return "I am A" },

    render() {
    return(
        <h1>{this.doSomething()}</h1>
      );    
   }
    });

class B extends A {
   doSomething(): any {
     console.log("I am B");
   } 
}

https://jsfiddle.net/wp4wshdu/

我和这里有同样的问题 => How to override a parent class method in React? 这似乎是因为只有组件 B 以 EC-6 样式定义。我的问题是我无法更改 A 类。在这种情况下如何让 React 使用 B 的方法？

【问题讨论】：

jsfiddle.net/wp4wshdu
How to override a parent class method in React?的可能重复
@Hitmands，这可能是一个不好的例子，因为它似乎在 REPL 中按预期工作......我只是试图解释我在项目中面临的问题，我可能会遗漏一些东西。我只是想知道在 React 中是否可能出现这种行为，在某些情况下它使用父级的方法而不是组件的方法？
@AngelCuenca，谢谢。确实，我有同样的问题，只是可以解释得更糟。似乎问题在于只有子组件以 ES6 样式定义。我仍然有一个问题，当我无法重写父类并将其调整为 ES6 样式时，我该怎么办
如果它实际上不是一个类，请提供它的真实代码。

标签： javascript reactjs ecmascript-6 components

【解决方案1】：

在上面的代码中doSomething是A上的实例方法和B上的原型方法。

大致相同

 class A extends React.Component {
   doSomething = () => {
     console.log("I am A");
   } 
 }

 class B extends A {
   doSomething() { ... } 
 }

在原型链中，来自 A 的 doSomething 击败来自 B 的 doSomething。在任何地方都坚持使用 ES6 类中的方法的原型属性来避免类似的问题是惯例。如果这不可能，doSomething 也应该成为子类中的实例方法：

 class B extends A {
   doSomething = () => { ... } 
 }

【讨论】：

听起来合法。但是，我无法让它工作:(jsfiddle.net/ffgawww2 也没有在我的 webpack 项目中。
我不确定 fiddle 出了什么问题以及如何正确设置它，但是类字段是 Stage 2 proposal，并且 Babel 应该配置为 Stage 2（或更低）。
很高兴它有帮助。