2

我有页面或大型组件需要在主页加载后呈现。我懒惰地加载了它们，但是在使用时出现错误createElement()：

LazyExoticComponent | LazyExoticComponent 不能分配给类型为“字符串”的参数 | 函数组件<RefAttributes> | ComponentClass<RefAttributes, any>'

我测试过的：

import Page2 from "./Page2";
import Page3 from "./Page3";
const pages = [Page2, Page3];

//in any method in the react component
let s = [Page2];
let ss = [Page2, Page3];
let sss = pages[0];
let r = React.createElement(s[0]); //this works
let rr = React.createElement(ss[0]); //does not work
let rrr = React.createElement(sss); //does not work

使用最新版本的 Typescript、React、React-Scripts 似乎没有任何影响。

打字稿^3.9.9，反应^16.14.0，反应脚本^2.1.8，“@types/react”：“^17.0.0”，“react-dom”：“^16.13.1”，没有@types /react-dom

4

2 回答 2

1

这个特殊问题与 React.Component 类型的泛型有关。如果使用数组，每个元素页面的 React.Component 'signature' 必须相同，否则会抛出此错误。例如：

export default class Page2 extends React.Component {...}
export default class Page3 extends React.Component {...}

//in main file
const Page2 = lazy( ()=>import('./Page2') );
const Page3 = lazy( ()=>import('./Page3') );
const pages = [Page2, Page3];
...
let page = React.createElement(pages[1]);

这将起作用，因为 Page2 和 Page3 的“签名”是相同的。即，它们是<>。

export default class Page2 extends React.Component<IPage2Props, IPage2State>
export default class Page3 extends React.Component<IPage3Props, IPage3State>

另一方面，这些将不起作用，并且是导致我发布的问题的原因。即使 IPage3Props 和 IPage2Props 在 interface/type 中的内容相同，它 TS 仍然不会理解。

据我所知，这个问题与环境或 TS 的版本或使用的 React 没有任何关系。

显而易见的解决方案是使“签名”相同。这可能不切实际，我不确定还能做些什么来解决这个问题。

于 2021-04-05T19:11:53.583 回答
-1

您可以简单地使用惰性和Suspense后备内容。

然后应该在 Suspense 组件中呈现惰性组件，这允许我们在等待惰性组件加载时显示一些备用内容（例如加载指示器）。

一个例子：

import React, { Component, createElement, lazy, Suspense } from "react";

const Page2 = lazy(() => import("./Page2"));
const Page3 = lazy(() => import("./Page3"));

const pages = [Page2, Page3];

class App extends Component {

  render() {
    let s = [Page2];
    let ss = [Page2, Page3];
    let sss = pages[0];
    let r = createElement(s[0]);
    let rr = createElement(ss[0]);
    let rrr = createElement(sss);
    return (
      <>
        <h2>App</h2>
        <Suspense fallback="loading..."> {/* <== using the Suspense /*}
          {r} {rr} {rrr}
        </Suspense>
      </>
    );
  }
}

这是代码沙盒

于 2021-04-04T18:29:45.687 回答