用IF ELSE构造HTML

Question

嗨,我正在尝试在渲染中创建HTML,其中一些部分依赖于我在IF ELSE中放置的条件.但是,如果声明被视为纯文本而未按预期获得结果.有人能告诉我在哪里错了吗？

render(){
    console.log('email'+this.state.email);

    var html =  <Navbar style={styles.menu} color="faded" light expand="md">
        <NavbarBrand style={styles.image} href="/"><img  src="../../images/op-logo.jpg"/></NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavLink href="/tournaments">Tournaments</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="/players-ladder">Ladder</NavLink>
            </NavItem>
            if (this.state.email!='') {
              ('Welcome' + this.state.email+<NavItem><NavLink href="/logout">Logout</NavLink></NavItem>)
            } else {
              (<NavItem><NavLink href="/login">Login/Signup</NavLink></NavItem>)
            }
          </Nav>
        </Collapse>
      </Navbar>

    return (
      <div>
        {html}
      </div>);
  }

Answer 1

在jsx你内部不能使用if块因为jsx被解析并转换为javascript并且其语法不允许它.但是在大多数情况下你可以使用三元运算符来进行条件渲染:

{this.state.email ? (
    <React.Fragment>
        <p>{`Welcome ${this.state.email}`}</p>
        <NavItem>
            <NavLink href="/logout">Logout</NavLink>
        </NavItem>
    </React.Fragment>
) : (
    <NavItem>
        <NavLink href="/login">Login/Signup</NavLink>
    </NavItem>
)}

另请注意,您不在 render方法中创建html.jsx完全转换为javascript.您可以将其视为嵌入式模板语言,其中包含和部分以反应组件的形式,其中反应是呈现引擎.