我想根據某些復選框選擇模式呈現不同的組件，而不必匯入可能不會使用的組件。
我有一個包含組件名稱的陣列（我以數字為例），我想根據陣列的值匯入每個組件。
我想出了這樣的事情：
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>
)
}
我知道這個解決方案不起作用，但我認為它解釋了我想要做什么。
我可以嘗試使用狀態，但實際的“檔案陣列”是實際應用程式中的狀態變數，因此它可能導致重復狀態。
我這樣做是為了測驗并作業：
const A = React.lazy(() => import(`documents/1.jsx`))
...
*** SNIP ***
...
<Suspense fallback={<div>Loading...</div>}>
{
docs.map((val) => <A/>)
}
</Suspense>
但我不能像這樣動態匯入每個組件。
uj5u.com熱心網友回復：
好的，所以你不需要條件匯入，你只想做條件渲染。這更簡單。
例子：
import { FormA } from "./FormA";
import { FormB } from "./FormB";
const MyComponent = ({ which }) => {
return <>
{which === "form-a" && <FormA />}
{which === "form-b" && <FormB />}
<>;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503801.html
標籤：javascript 反应 进口