Typescript和react-loader有一些问题

Question

当我使用打字稿和react-loader时，控制台报告了这样的错误

这是一个新的项目测试。使用react-loadable实现动态加载

import Loadable from 'react-loadable';
const Home = Loadable({
  loader: () => import('../home/home'),
  loading: <div></div>,
})

这怎么了

Answer 1

尝试一下：

import Loadable from 'react-loadable';
const Home = Loadable({
    loader: async () => {
        const module = await import('../home/home')
        return module.default // or module.Home if you have named exports
    },
    loading: <div></div>,
})

Answer 2

尝试一下：

    正在加载组件

import React from 'react';
import Loadable  from 'react-loadable';

interface LoaderProps extends Loadable.LoadingComponentProps  {

}

const Loader : React.FC<LoaderProps> = (props: LoaderProps) => {

  return (
    <div>Loading...</div
  );
};

export default Loader;

可加载组件

/**
* Asynchronously loads component
*/
import Loadable  from 'react-loadable';
import Loader from 'components/Loader';

export default Loadable({
  loader: () => import('./Home'),// where Home is your component
  loading: Loader,
});

Answer 3

别忘了扩展 Loadable.LoadingComponentProps ，否则在导入Laoding组件时会出现类型错误。

interface LoaderProps extends Loadable.LoadingComponentProps  {}

const Loading: FunctionComponent<LoadingProps> = props => {
 //your JSX
}