2015-06-26 11 views
14

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?

risposta

2

Penso che il problema è che non è possibile creare strutture di classe più profonde per la reazione dei componenti. Inoltre, non dovresti averne bisogno. Nel tuo esempio lo BaseComponent è comunque inutile.

Prova a modificare:

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> 
     ); 
    } 
} 

Se si desidera creare 'BaseComponents', li si potrebbe implementare come mixins o semplicemente come «componenti secondari.

Questa potrebbe essere la seguente:

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: Anche possibile:

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: Sopra codice funziona bene con ES5/JSX sintassi.

DEMO

+1

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? –

+0

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

Problemi correlati