Question

所以我有一个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
    }
}

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

所以我这样做：

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

export default withRouter(OtherComponent)

问题是，现在我无法访问BaseComponent中的属性，并且返回undefined。

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

Answer 1

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

应避免使用常规扩展组件类，即使使用了，也不应在＆＃34; smart＆＃34;无论如何都要连接组件 - 更喜欢React组件的组合而不是继承。

和

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

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

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

React：如何从更高阶的组件访问基类

1 个答案: