0

여기에 설명 된대로 AsyncCompoment 클래스를 구현하여 React에서 라우트로드를 지연하려고합니다. Code Splitting in Create React App. 다음은 튜토리얼에서 ES6의 asyncComponent 기능은 다음과 같습니다게으른로드로 인해 Typescript 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 인덱스를 가져 오는 것이 올바른 방법인지는 확실치 않습니다.

답변

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