通过 props 值对路径进行动态渲染

Question

我正在尝试使用 react.lazy 渲染一个组件，路径中的 lazy 是我的 props 上的一个变量，但我在 webpack 中遇到错误。

我的组件父亲像这样发送道具：

      <DynamicModal url = 'Impuesto/formulario'  />

带有 reactLazy 的组件是这个：

    import React from 'react';
import { withRouter } from 'react-router';
import {SpinLoadingModal} from 'config/SpinLoading/index.js';



function DynamicModal(props) {

const path = props.url;



  const LazyComponent = React.lazy(() => import(path));

  return (

    <React.Suspense fallback={<SpinLoadingModal />}>
      <div>
      <LazyComponent/>
      </div>
    </React.Suspense>
  );
}


export default withRouter (DynamicModal);

我可以在控制台中看到的错误：

> Uncaught Error: Cannot find module 'Impuesto/formulario'
    at DynamicModal lazy groupOptions: {} namespace object:5
(anonymous) @ DynamicModal lazy groupOptions: {} namespace object:5
> 
> function webpackEmptyAsyncContext(req) {
    // Here Promise.resolve().then() is used instead of new Promise() to prevent
    // uncaught exception popping up in devtools
    return Promise.resolve().then(function() {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    });
}
webpackEmptyAsyncContext.keys = function() { return []; };
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
module.exports = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = "./src/config/DynamicModal lazy recursive";

这在我的浏览器中：

× Error: Cannot find module './Impuesto/formulario' (匿名函数) src/config lazy /^/.*$/ groupOptions: {} 命名空间对象:123

我之前读过有关在控制台中检查堆栈中的导入并尝试检查此代码的信息：

 import(`../components/${res}`).then(() => {
    console.log("Loaded")
  }, (err)=>{
    console.log("Error", err)
  })

但不要帮我太多，错误继续。 非常感谢您的任何帮助或建议！

注意：如果我更改代码：

  const LazyComponent = React.lazy(() => import('Impuesto/formulario'));

这行得通，但我真的想用变量改变！ 好吧，如果这是可能的！ 哈哈

Answer 1

除了我建议的评论解决方案（对我来说更有意义）之外，您还可以将已解决的导入置于状态中：

    function DynamicModal(props) {
      const [LazyComponent, setLazyComponent] = React.useState(() => () => 
      <div/>);

       React.useEffect(() => {
            const Lzy = React.lazy(() => import(`./${props.url}`));
            setLazyComponent(Lzy);
       }, [props.url]);


      return (

        <React.Suspense fallback={<SpinLoadingModal />}>
          <div>
          <LazyComponent/>
          </div>
        </React.Suspense>
      );
    }

我之前在评论中提到的另一种解决方案（imo 更好）：

const LazyComp1 = React.lazy(() => import('./Comp1'));
const LazyComp2 = React.lazy(() => import('./Comp2'));
const LazyComp3 = React.lazy(() => import('./Comp3'));

const lazyMap = {
 LazyComp1,
 LazyComp2,
 LazyComp3
};

function DynamicModal(props) {
   const LazyComponent = lazyMap[props.lazyKey]           
          return (

            <React.Suspense fallback={<SpinLoadingModal />}>
              <div>
              <LazyComponent/>
              </div>
            </React.Suspense>
          );
        }