Warum reagiert diese Komponente, die mit System.import importiert wurde, nicht?

Question

Ich versuche dynamische Codeaufteilung mit Webpack 2 zu implementieren und zu reagieren. Um zu testen, habe ich eine Komponente erstellt, die asynchron in Code zieht:

import React, { Component } from 'react' 

export class Async extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { component: <div>Loading</div> } 
    } 

    componentDidMount() { 
    System.import('../../about') 
     .then(component => this.setState({ component: component.About })) 
     .catch(error => this.setState({ component: <div>{error.message}</div> })) 
    } 

    render() { 
    return this.state.component 
    } 
} 

Allerdings, wenn ich es montieren, es gibt den folgenden Fehler:

Async.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 

Einlochen console.log (this.state .component) in Async ‚s-Funktion ergibt sich folgende render:

So falsch hier, was los ist? Es scheint, als würde ich gültige Reaktionskomponenten erhalten, warum wirft es einen Fehler auf?

Answer 1

Sie geben die Komponentenklasse zurück, wenn Sie sollten tatsächlich ein Element zurückgegeben von dieser Klasse zurückgeben. Sie sind nicht das Gleiche!

// Replace this: 

render() { 
    return this.state.component 
} 

// With this: 

render() { 
    return <this.state.component /> 
} 

// Or this: 

render() { 
    return React.createElement(this.state.component) 
} 

Answer 2

Ich glaube, Sie this.state.component innerhalb {} wickeln müssen und eine <div> und dass das, was der Fehler über

ist

Sie benötigen ein Element aus dem Bauteil

class Async extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     component: React.createElement('div', {}, "loading") 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     this.state.component 
 
    ) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<Async/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<div id="app"></div>

class Async extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     component: React.createElement('div', {}, "loading") 
    } 
    } 
componentDidMount() { 
    System.import('../../about') 
     .then(component => this.setState({ component: React.createElement(component.About) })) 
     .catch(error => this.setState({ component: React.createElement('div', {}, error.message) })) 
    } 
    render() { 
    return (
     this.state.component 
    ) 
    } 

} 

erstellen