React：如何从高阶组件访问基类答案

【问题标题】：React: how to access base class from higher order componentsReact：如何从高阶组件访问基类
【发布时间】：2016-12-08 06:32:03
【问题描述】：

所以我有一个BaseComponent.jsx，我在我的许多组件上进行了扩展。这很好用。

class BaseComponent extends React.Component {
    constructor(props){
        super(props)
        this.something = true
    }
}

class OtherComponent extends BaseComponent {
    constructor(props){
        super(props)
        console.log(this.something) // true
    }
}

但现在我需要使用来自react-router 的withRouter(component)，它将您的组件包装在一个更高阶的组件中并装饰您的类。

所以我这样做：

class OtherComponent extends BaseComponent {
    constructor(props){
        super(props)
        console.log(this.something) // undefined
    }
}

export default withRouter(OtherComponent)

问题是现在我无法访问来自BaseComponent 的属性，而那些返回undefined。

我该如何解决这个问题，以便我可以创建一个 HoC 并同时访问基类的属性？

【问题讨论】：

我没有看到相同的行为。我根据您的示例创建了一个小提琴，它正确记录了true。添加它应该按照您的描述和这个小提琴说明的那样工作，因为 HoC 不会改变他们正在组成的组件。 jsfiddle.net/okpLvu3e
嘿@RyanDuffy 这个简单的例子有效，但是当你开始添加孩子时，它就不行了。检查这个：github.com/reactjs/react-router/issues/3514 他们根本不推荐扩展 React.Component。
你能用组件组合来实现你想要的吗？开发 React 组件时不鼓励子类化。
如果我根据链接的问题正确理解，您想扩展已用 withRouter 包装的组件，这是不可能的。您可以导出包装和未包装的版本，并使用后者进行扩展。综上所述，正如@loganfsmyth 所建议的那样，组合可能是一个更好的解决方案，但鉴于你的例子很难说。
是的，如果我想使用withRouter()，我将不得不忘记继承。

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

React 团队不鼓励扩展 React 组件。即使它在某些情况下有效，但在执行更高级的事情（例如高阶组件）时结果是不可预测的。

应该避免通用扩展组件类，即使使用，也不应该在“智能”连接组件上使用——对于 React 组件，更喜欢组合而不是继承。

和

您不能实现扩展组件的通用 HoC，原因很简单，因为 HoC 必须使用所有三种形式的 React 组件声明。

来源：https://github.com/reactjs/react-router/issues/3514

所以我的问题的答案很简单，它不能完成，我应该转向组合而不是继承。

【讨论】：