沒有JSX的條件渲染

Question

是否可以使用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});
    );
}

但這是行不通的。 我該怎么辦？

Answer 1

更改

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});
    );
}

現在您的代碼應該可以正常工作，請參閱此頁面以備將來參考