react 动态加载组件
有很多组件、根据类型不同,希望能够动态加载对应的组件。
现在的做法是,通过if else 或者switch 去渲染,但是这些组件都是一次性的全部加载进来了。
这样要写很多重复代码 ,想的思路是 通过 路径 传进去 ,找到 路径 对应的组件 作为 变量 放到 dom 里面
实现方式
const DevicePage: React.FC<props> = ({ children }) => {
const rightPanelEnum = useRecoilValue(rightPanelType);
const [component, setComponent] = useState<ReactNode | null>(null);
useEffect(() => {
// 根据 rightPanelEnum 不同,加载不同的 组件文件
import(`@/compoments/inputSlotAttribute/${rightPanelEnum}`).then(({ default: Component }) => {
setComponent(Component);
});
}, [rightPanelEnum]);
return (
<div className="inner-content">
<div className="content-right">
{/* 动态加载*/}
{Component ? component : null}
</div>
</div>
);
};
export default DevicePage;
遇到的问题
如果你 组件路径 没有写错的话 ,可能会遇到 这种问题
Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://reactjs.org/link/rules-of-hooks
他说你 在 useEffect 或者 useMemo 里面 调用 了hook ,这个是不被允许的
https://zh-hans.reactjs.org/warnings/invalid-hook-call-warning.html
如果你传一个素的组件, 他就不会报这个错, 页面 也会被正常显示出来
但是你在素组件里面 加了 useState 啊 ,useEffect 啊 等 hooks 的话, 他就报错了
解决办法就是你 可以 在素组件里面 放你 想要 动态 改变的组件,即使 动态改变的组件里面 有 hooks 也不受影响
参考
js import https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import