Javascript 无JSX的条件呈现

是否可以使用

React.createElement

执行以下操作

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
}

但它不起作用。我该怎么办

变化

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = React.createElement("LogoutButton" { "onClick": this.handleLogoutClick }, null);
    } else {
      button = React.createElement("LogoutButton" { "onClick": this.handleLoginClick }, null);
    }

    return (
      React.createElement("div", null, {button});
    );
}

到

---

现在，您的代码应该可以正常工作，并查看将来的任何引用

请参见：

React.createElement（“LogoutButton”

应该是

React.createElement（LogoutButton

），其中

LogoutButton

是对该类/函数的引用。您在

React.createElement（“LogoutButton”{“onClick”）中的语法无效：this.handleLogoutClick}，null）；

。缺少

，

。也可以使用

注销按钮

而不是

注销按钮

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = React.createElement("LogoutButton" { "onClick": this.handleLogoutClick }, null);
    } else {
      button = React.createElement("LogoutButton" { "onClick": this.handleLoginClick }, null);
    }

    return (
      React.createElement("div", null, {button});
    );
}

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = React.createElement(LogoutButton, { "onClick": this.handleLogoutClick }, null);
    } else {
      button = React.createElement(LogoutButton, { "onClick": this.handleLoginClick }, null);
    }

    return (
      React.createElement("div", null, {button});
    );
}