根據輸入動態導入 React 組件

Question

我想根據某些復選框選擇模式呈現不同的組件，而不必導入可能不會使用的組件。

我有一個包含組件名稱的數組（我以數字為例），我想根據數組的值導入每個組件。

我想出了這樣的事情：

import {Suspense} from 'react'


export default function CreationForm() {

 const docs = [1,3,5]

  return (
      <Suspense fallback={<div>Loading...</div>}>
        {
          docs.map(val => React.lazy(() => import(`documents/${val}.jsx`)))   
        }
      </Suspense>
  )

}

我知道這個解決方案不起作用，但我認為它解釋了我想要做什么。

我可以嘗試使用 state 但實際的“文檔數組”是實際應用程序中的 state 變量，因此它可能導致重復的 state。

我這樣做是為了測試並工作：

  const A = React.lazy(() => import(`documents/1.jsx`))
  ...
  *** SNIP ***
  ...
      <Suspense fallback={<div>Loading...</div>}>
        {
          docs.map((val) => <A/>)   
        }
      </Suspense>

但我不能像這樣動態導入每個組件。

Answer 1

好的，所以你不需要條件導入，你只想做條件渲染。 這更簡單。

例子：

import { FormA } from "./FormA";
import { FormB } from "./FormB";

const MyComponent = ({ which }) => {
    return <>
        {which === "form-a" && <FormA />}
        {which === "form-b" && <FormB />}
    <>;
};