Я пытаюсь использовать классы ES6 внутри React и хочу, чтобы все мои компоненты наследовали определенные методы, однако, как только я попытаюсь расширить компонент, который расширяет класс React.Component, метод componentDidMount не запускает и, следовательно, ничего не получается. Код, который я использую:
BaseComponent.jsx
import React from 'react';
class BaseComponent extends React.Component {
constructor() {
super();
console.log('BaseComponent constructor');
}
render() {
return (
<div>Hello, Im the base component</div>
);
}
}
export default BaseComponent;
ExampleComponent.jsx
import BaseComponent from './BaseComponent';
class ExampleComponent extends BaseComponent {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>Hello, Im the example component</div>
);
}
}
export default ExampleComponent;
App.jsx
import React from 'react';
React.render(<ExampleComponent />, document.body);
Я использую React 0.13.3 и использую babelify 6.1.2 для пересылки.
Строка 'exampleComponent installed' никогда не регистрируется на консоли, и ничего не отображается. Любые идеи, что я делаю неправильно?
Я не уверен в этом подходе, но этот код также работает:
export default class Service extends BaseComponent {
componentDidMount(...args) {
super.componentDidMount.apply(this, args);
}
}
UPD: это считается плохой практикой:
a) https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 b) https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
Я думаю, проблема в том, что вы не можете создавать более глубокие классовые структуры для реагирующих компонентов. Кроме того, вам не нужно будет этого. В вашем примере BaseComponent бесполезен.
Попробуйте это вместо:
import React from 'react';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>Hello, Im the example component</div>
);
}
}
Если вы хотите создать "BaseComponents", вы можете реализовать их как mixins или просто как "субкомпоненты".
Это может выглядеть так:
import React from 'react';
import BaseComponent from './BaseComponent';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<div>
<div>Hello, Im the example component</div>
<BaseComponent />
</div>
);
}
}
EDIT: возможно:
import React from 'react';
import BaseComponent from './BaseComponent';
export default class ExampleComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('exampleComponent mounted');
}
render() {
return (
<BaseComponent
<div>Hello, Im the example component</div>
</BaseComponent>
);
}
}
// BaseComponent.js
render() {
return {
<div>
<div>Hello, Im the base component</div>
{this.props.children}
</div>
}
}
EDIT # 2. Над кодом отлично работает с синтаксисом es5/jsx.