当前位置: 首页 > 知识库问答 >
问题:

如何在ReactJS JSX中做一个嵌套的如果其他语句?

宿建本
2023-03-14

我想知道在ReactJSJSX中是否可以嵌套if else if?

我尝试过各种不同的方法,但我无法让它发挥作用。

我正在寻找

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

我已经试过了,但是我不能把它渲染出来。我试过各种方法。添加嵌套if后,它总是会中断。

{
  this.state.loadingPage ? (
    <div>loading page</div>
  ) : (
    <div>
      this.otherCondition && <div>title</div>
      <div>body</div>
    </div>
  );
}

使现代化

最后,我选择了将其移动到renderContent并调用该函数的解决方案。不过,这两个答案都有效。我想我可以使用内联解决方案,如果它用于简单的渲染和更复杂的情况下的渲染内容。

谢谢你

共有3个答案

邰伟彦
2023-03-14

您可以检查多个条件来相应地呈现组件,如下所示:

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>
王季萌
2023-03-14

您可以简单地调用一个内联表达式,而不是像通常建议的那样嵌套三元运算符或创建一个不会在其他任何地方重用的单独函数:

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>
康文昌
2023-03-14

您需要将标题和正文包装在一个容器中。这可能是一个div。如果改用list,则dom中的元素将减少一个。

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}

我建议不要嵌套三元语句,因为它很难阅读。有时,“早回来”比使用三元表更优雅。此外,您还可以使用isBool

renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

render() {
  return <div className="outer-wrapper">{ this.renderContent() }</div>;
}

语法someBoolean的警告

 类似资料:
  • 我想创建一个类,它的功能只是做一个碎片事务,但我有一个错误。我的课是下一个: 进程:net.elinformaticoenganchado.sergio.crossfights,PID:5116 java.lang.runtimeException:无法启动活动ComponentInfo{net.elinformaticoenganchado.sergio.crossfights/net.elin

  • 所以读了一些书之后我看到了 不是使用可选选项的首选方式(http://www.oracle.com/technetwork/articles/java/java8-optional-2175753.html).但如果我有这样一个if语句: 这是最好的方法还是有更推荐的方法?

  • 如何更改下面的代码以删除if-else并使用Java8

  • 我已经开始练习R闪亮,请在下面的代码中找到我试图进行计算的部分。请协助获取输出,因为我无法生成。 用户界面 库(发光)库(发光板) 我的页面 titlePanel(“零基成本模型”), 侧边栏 侧边栏面板(“输入客户详细信息”), 条件="input.tabselect==1", conditionalPanel(condition=“input.tabselect==5”, #submitBut

  • 问题内容: 我知道如何在同一包中的结构中嵌入其他结构,但是如何在其他包的结构中嵌入结构? dog.go main.go 当我运行main.go时,它告诉我一个错误: 问题答案: @simon_xia是正确的,看来您 可能 对Go有点陌生。 首先,欢迎来到社区!! 现在,请扩展一下他的评论… Go并未提供成员/方法的公共/私有范围,而是具有Exporting的概念。因此,如果要允许从另一个包访问方法

  • 问题内容: 我对PHP / SQL感到很糟糕,所以任何帮助将不胜感激。 基本上,我有一个将值“ firstname”和“ surname”发布到另一页的表单。我想要该页面执行的操作是检查用户名是否已经在表“ Members”上。如果是,我希望它继续加载此页面,但是如果它们不在数据库中,则希望将查看器重定向到现有的注册页面。 这是我一直在努力的代码,我不确定我是否朝着正确的方向前进。 问题答案: 这