React: как получить доступ к базовому классу из компонентов более высокого порядка

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. Даже если он работает в некоторых случаях, результаты непредсказуемы, когда вы делаете более интересные вещи, такие как компоненты более высокого порядка.

Следует избегать общих расширяющих классов компонентов, и даже при их использовании не следует использовать на «умных» подключенных компонентах - предпочитайте состав над наследованием для компонентов React.

И

Вы не можете реализовать общую Hoc, который расширяет компонент по той простой причине, что Hoc должен работать со всеми тремя формами Реагировать декларации компонентов.

Источник: https://github.com/reactjs/react-router/issues/3514

Таким образом, ответ на мой вопрос просто, что это не может быть сделано, и я должен перейти к композиции вместо наследования.