如何在 React + Typescript 中为延迟加​​载创建 hoc

问题描述

这是我第一次用 Typescript 写 React。当我调用app.tsx时，弹出一个错误，这个程序有什么问题

错误 对象作为 React 子对象无效（找到：[对象模块]）。如果您打算渲染一组子项，请改用数组。

// Lazy loading hoc 

import React from 'react'; 
const Lazy:React.FC = (func: Function) => {
  
  return (props: Props) => {
    const [compState,setCompState] = useState<{ comp: React.ReactNode }>({
        comp: <div style={styles}>loading...</div>,});

    useEffect(() => {
        const a = async () => {
            let c: React.ReactChild = await ComponentFunc();    
            setCompState({
                comp: c as React.ReactNode
            });
        };

        a();
    },[]);

    // return <>{compState.comp}</>;
    const Comp:React.ReactNode = compState.comp;
    return <>
        {Comp}
    </>
  }
}

// myComponent
import React from 'react'; 
const myComponent:React.FC = () => {
  return <h1>my Component</h1>
}
export default myComponent; 

// app.tsx
import Lazy from './Lazy'; 
const component = Lazy(()=>import('./myComponent'));
const app:React.FC = () => {
  return <component />
}
export default app; 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）