typescript - 和 React.createElement

Question

在 .tsx 中，这按预期工作：

const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTSX = (
  <React.Suspense fallback={<div>Loading</div>}>
    <LazyComponent />
  </React.Suspense>
)
render(SuspenseComponentTSX);

但是 .ts 中假定的等效项不起作用：

const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTS = React.createElement("Suspense", { 
   fallback: React.createElement("div", null, "Loading")
 },
 React.createElement(LazyComponent)
);
render(SuspenseComponentTS); // fails

尝试呈现 SuspenseComponentTS 时的错误消息如下：

    A React component suspended while rendering, but no fallback UI was specified.

    Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

打印到控制台，它们似乎是等效的：

输出expect(SuspenseComponentTSX).toEqual("")：

    expect(received).toEqual(expected) // deep equality

    Expected: ""
    Received: <React.Suspense fallback={<div>Loading</div>}><UNDEFINED /></React.Suspense>

输出expect(SuspenseComponentTS).toEqual("")：

    expect(received).toEqual(expected) // deep equality

    Expected: ""
    Received: <Suspense fallback={<div>Loading</div>}><UNDEFINED /></Suspense>

Answer 1

React.createElement("Suspense", {

字符串仅适用于基本的 dom 元素，例如“div”、“span”。要渲染 React.Suspense，你需要：

React.createElement(React.Suspense, {