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，并且其语法不允许这样做。但是在大多数情况下你可以使用ternary operator来进行条件渲染：

{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。您可以将其视为嵌入式模板语言，其中包含和部分以反应组件的形式，其中反应是呈现引擎。

用IF ELSE构造HTML

1 个答案: