Sto cercando di utilizzare le classi ES6 all'interno di React e voglio che tutti i miei componenti ereditino determinati metodi, tuttavia, non appena provo ad estendere un componente che estende React. Component class, il metodo componentDidMount non si attiva e quindi non viene eseguito il rendering. Il codice che sto usando:componentDidMount non attivato quando si utilizza la classe di reazione ES6 ereditata
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);
sto usando Reagire 0.13.3, e usando babelify 6.1.2 per traspare.
La stringa 'exampleComponent mounted' non viene mai registrata nella console e non viene eseguito il rendering. Qualche idea su cosa sto facendo male?
Sì, sono consapevole che l'esempio è inutile, ma l'ho appena fatto per evidenziare il problema. Non ero a conoscenza del fatto che React non permetta strutture di classe più profonde. Il mio progetto consiste in una serie di modelli che hanno funzionalità comuni (e condividono gli stessi stati), quindi era logico provare a metterli in una classe base. Ho anche letto che i mix-in non sono disponibili quando si usano le classi ES6 React - lo sai comunque su questo? –
quando alcuni componenti hanno lo stesso stato, è possibile utilizzare il mio secondo esempio. Crea un nuovo componente con le proprietà di stato e che restituisce le parti, che sono sempre le stesse e lo rendono nel tuo componente specifico come puoi vedere sopra. – marcel