javascript 如何动态导入一个React组件并调用它?

wkyowqbh  于 2023-01-08  发布在  Java
关注(0)|答案(1)|浏览(107)

我有一个react组件,它包含一个SVG图像,我像这样导入它
第一个月
然而,作为代码拆分的一部分,我想动态导入它,而不是静态导入。
我试过了,但是不起作用
import('../static/styles/svg/messageIcon').then(MessageIcon => { return <MessageIcon /> });
谁能告诉我如何动态导入和调用这个组件吗?谢谢

gzszwxb4

gzszwxb41#

可以按如下方式导入动力学:

import React, { useEffect, useState } from "react";

const App = () => {
    const [state, setState] = useState<any>();

    useEffect(() => {
        (async () => {
            const i = await import("../../assets/img/user.svg");
            setState(i);
        })();
    }, []);
    
    return <img alt={"test dynamic"} src={state?.default} />;
};
export default App;

此外,您也可以使用ref编写它:

import React, { useEffect, useRef } from "react";

    const App = () => {
        const ref = useRef<any>();

        useEffect(() => {
            (async () => {
                const i = await import("../../assets/img/user.svg");
                ref.current.src = i.default;
            })();
        }, []);
        
        return <img alt={"test dynamic"} ref={ref} />;
    };
    export default App;

相关问题