게으른로드로 인해 Typescript AsyncComponent에 응답

Question

여기에 설명 된대로 AsyncCompoment 클래스를 구현하여 React에서 라우트로드를 지연하려고합니다. Code Splitting in Create React App. 다음은 튜토리얼에서 ES6의 asyncComponent 기능은 다음과 같습니다

내가 타이프에서이 기능을 작성했습니다 및 구성 요소가 실제로 느리게로드되는 것을 확인할 수

import React, { Component } from "react"; 

    export default function asyncComponent(importComponent) { 
     class AsyncComponent extends Component { 
     constructor(props) { 
      super(props); 

      this.state = { 
      component: null 
      }; 
     } 

     async componentDidMount() { 
      const { default: component } = await importComponent(); 

      this.setState({ 
      component: component 
      }); 
     } 

     render() { 
      const C = this.state.component; 

      return C ? <C {...this.props} /> : null; 
     } 
     } 

     return AsyncComponent; 
    } 

. 내가 직면 한 문제는 렌더링되지 않는다는 것입니다. 객체가 importComponent 함수로부터 반환

//AsyncComponent.tsx 
async componentDidMount() { 
       const { default: component } = await importComponent(); 

       this.setState({ 
       component: component 
       }); 
      } 

다음 프로퍼티를 가진다 : I는 컴포넌트 객체가 항상 componentDidMount 후크 정의되지 않은 것을 확인할 수 있었다 I는 상기 componentDidMount 방법을 수정

{ 
MyComponent: class MyComponent: f, 
__esModule: true 
} 

이 객체의 첫 번째 속성 인 MyComponent 클래스를 가져옵니다. 이 변경 후 내 프로젝트는 이제 게으른 구성 요소를로드하고 제대로 렌더링됩니다.

const { default: component } = await importComponent(); 

내가 그렇게처럼 asyncComponent 메소드를 호출하고 있습니다 :

const MyComponent = asyncComponent(()=>import(./components/MyComponent)); 

사람은 방법을 알고

async componentDidMount() { 
      const component = await importComponent(); 

      this.setState({ 
      component: component[Object.keys(component)[0]] 
      }); 
     } 

내 추측은 내가 타이프에서 제대로이 줄을 작성하지 않은 것입니다 typescript에 AsyncComponent를 구현합니까? 단순히 esModule 객체에 0 인덱스를 가져 오는 것이 올바른 방법인지는 확실치 않습니다.

Answer 1

내가 필요한 것은 지연로드하려는 모든 구성 요소 클래스에서 기본값을 내보내는 것이 었습니다. 다음은 완벽한 솔루션입니다.

//AsyncComponent.tsx 
import * as React from "react"; 

interface AsyncComponentState{ 
    Component: any; 
} 
export default function asyncComponent(getComponent: any): any { 
    class AsyncComponent extends React.Component<{},AsyncComponentState> { 


     constructor(props: any) { 
      super(props); 

      this.state = { 
       Component: null 
      }; 
     } 

     async componentDidMount(){ 
      const {default: Component} = await getComponent(); 
      this.setState({ 
       Component: Component 
      }); 


     } 


     render() { 
      const C = this.state.Component; 
      return C ? <C {...this.props}/> : <div>....Loading</div> 
     } 
    } 
    return AsyncComponent; 

} 
//Counter.tsx 
import * as React from 'react'; 
import { RouteComponentProps } from 'react-router'; 

interface CounterState { 
    currentCount: number; 
} 

class Counter extends React.Component<RouteComponentProps<{}>, CounterState> { 
    constructor() { 
     super(); 
     this.state = { currentCount: 0 }; 
    } 

    public render() { 
     return <div> 
      <h1>Counter</h1> 

      <p>This is a simple example of a React component.</p> 

      <p>Current count: <strong>{ this.state.currentCount }</strong></p> 

      <button onClick={() => { this.incrementCounter() } }>Increment</button> 
     </div>; 
    } 

    incrementCounter() { 
     this.setState({ 
      currentCount: this.state.currentCount + 1 
     }); 
    } 
} 
export default Counter; 

//routes.tsx 
import * as React from 'react'; 
import {Route} from 'react-router-dom'; 
import { Layout } from './components/Layout'; 
import { Home } from './components/Home'; 
import asyncComponent from './components/AsyncComponent'; 


const AsyncCounter = asyncComponent(() => import('./components/Counter')); 

export const routes = <Layout> 
    <Route exact path='/' component={ Home } /> 
    <Route path='/counter' component={ AsyncCounter } /> 
</Layout>;