用 IF ELSE 构造 HTML

Question

您好，我正在尝试在渲染中创建 HTML，其中某些部分取决于我放入 IF ELSE 的条件。但是 if 语句被视为纯文本并且没有得到预期的结果。谁能告诉我哪里错了？

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