合併多個窗口組件到一個模塊中

Question

我正在驗證我的反應項目，我現在的文件結構看起來像這樣

-components 
-auth 
    AuthContainer.jsx 
    ForgotWidget.jsx 
    LoginWidget.jsx 
    SignUpWidget.jsx 

然後我通過<LoginWidget />

調用我的頭文件中的分量將所有這些結合在一起的最佳做法是什麼，所以我可以稱之爲而不是調用每個人？

Answer 1

您可以設置一個包裝組件，根據特定的道具決定要渲染哪個組件。您的AuthContainer實際上看起來適合這一點。

也許你可以做點像<AuthContainer widget="login" />或<AuthContainer widget="forgot" />那麼。

在你AuthContainer你有一個像控制流程：

const {widget} = this.props; 
switch (widget) { 
    case 'login': return <LoginWidget />; 
    case 'forgot': return <ForgotWidget />; 
    .. 
} 

也許這widget也可能是容器的內部狀態，如果它負責所有允許用戶切換的控件之間的意見。