Объединение нескольких компонентов виджета в один модуль

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 также может быть внутреннее состояние контейнера, если он отвечает за все элементы управления, которые позволяют пользователю переключаться между взглядами.