将多个小部件组件组合到一个模块中

Question

我正在为我的react项目进行身份验证，而我当前的文件结构就像这样

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

然后我通过<LoginWidget />

调用我的头文件中的组件

将这些全部组合在一起的最佳做法是什么，所以我可以称之为而不是呼叫每个人？

Answer 1

您可以设置一个包装器组件，根据特定的prop确定要呈现的组件。您的AuthContainer实际上看起来很合适。

也许您可以执行<AuthContainer widget="login" />或<AuthContainer widget="forgot" />之类的操作。

在你的AuthContainer中你有一个控制流程如下：

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

如果widget负责允许用户在视图之间切换的所有控件，也许controller也可以是容器的内部状态。