时间戳

首页 > 解决方案 > React中如何使用import()动态加载组件？

reactjs - React中如何使用import()动态加载组件？

问题描述

我尝试使用import()而不是React.lazy动态加载组件，但是没有用。

应用程序.js

import React, { useState } from 'react';
function App() {
  const [Com, setCom] = useState(null);

  const handleClick = () => {
      import("./A.js").then(c => {
        //console.log(c.default)
        setCom(c.default)
      }) 
  }

  return (
      <div>
        <button onClick={handleClick}>Load</button>
        { Com ? <Com /> : null }
      </div>
   );
}

export default App;

js

import React from "react";

export default function A () {
    return (<div>A</div>)
}

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

事实上，我打印了c.default. 这真的是一个功能。

c.default

ƒ A() {
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 4
    },
    __self: this
  }, "A");
}

标签： reactjsdynamic-import

解决方案

实际上，它与动态无关，import而与useState实现有关。例如：

import Comp from "./A";

function App() {
  const [Com, setCom] = useState(Comp);

  return (
    <div>
      <Com />
    </div>
  );
}

会抛出同样的错误。那是因为当您调用 时useState(Comp)，Comp“函数”（即组件）已被执行（您可以测试它<Com />从代码中删除任何内容，添加console.log到内部A。console.log仍然会发生）。

结果Com不再是一个组件，而是一个 JSX 元素。当您尝试以函数方式呈现 JSX 元素时（意味着用<and包装它，会/>引发此错误。

解决方案要么设置Com为组件（() => Com），要么呈现为 JSX 子级（{Com}）

import React, { useState } from "react";

function App() {
  const [Com, setCom] = useState(null);

  const handleClick = () => {
    import("./A.js").then(c => {
      //console.log(c.default)
      setCom(c.default);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Load</button>
      {/* <Comp /> */}
      {Com}
    </div>
  );
}

export default App;

https://codesandbox.io/s/answer-for-httpsstackoverflowcomq62125854863110-jj2wu

顺便说一句，您可以通过原始结果和结果看到差异console.dirimport Comp from "./A";useState(Comp)

import Comp from "./A";

function App() {
  const [Com, setCom] = useState(Comp);
  // console.log(1, Com, 2, Comp);
  console.dir(Com) // Object
  console.dir(Comp) // ƒ A()
  //...
}

推荐阅读