Javascript 您应该如何修复不要嵌套三元表达式以有条件地渲染组件

{authModal.mode === 'login' ? <Login /> : authModal.mode === 'register' ? <SignUp /> : <ForgotPassword />}

{authModal.mode === 'login' && <Login />}
{authModal.mode === 'register' && <SignUp />}
{authModal.mode === 'forgotPassword' && <ForgotPassword />}

{(() => {
  if (authModal.mode === 'login') {
    return <Login />;
  }
  if (authModal.mode === 'register') {
    return <SignUp />;
  }
  return <ForgotPassword />;
})()}

{(() => {
  switch (authModal.mode) {
    case 'login':
      return <Login />;
    case 'register':
      return <SignUp />;
    case 'forgotPassword':
      return <ForgotPassword />;
    default:
      throw new Error('Invalid auth mode');
  }
})()}

const authComponent = useMemo(() => ({
  'login': <Login />,
  'register': <SignUp />,
  'forgotPassword': <ForgotPassword />
})[authModal.mode], [authModal.mode]);

return (
  <>
    {authComponent}
  </>
)

const authComponent = useMemo(() => {
  switch (authModal.mode) {
    case 'login':
      return <Login />;
    case 'register':
      return <SignUp />;
    case 'forgotPassword':
      return <ForgotPassword />;
    default:
      throw new Error('Invalid auth mode');
  }
}, [authModal.mode]);

return (
  <>
    {authComponent}
  </>
)

Javascript相关问答推荐

输入有关HTML复选框的已判断属性的信息

React状态变量在使用++前置更新时引发错误

在JavaScript中，如何将请求的回调函数的结果合并到运行的代码中？

容器如何更改默认插槽中子项的显示？

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗？

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

togglePopover()不打开但不关闭原生HTML popover'

如何在Obsidian dataview中创建进度条

rxjs插入延迟数据

使用getBorbingClientRect()更改绝对元素位置

扩展类型的联合被解析为基类型

VSCode中出现随机行

当我在Reaction中创建一个输入列表时，我的输入行为异常

如何限制显示在分页中的可见页面的数量

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

当代码另有说明时，随机放置的圆圈有时会从画布上消失

在Odoo中如何以编程方式在POS中添加产品

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

在Java脚本中构建接口的对象

为什么这个最小Angular 的Licial.dev设置不起作用？