javascript - 没有 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});
    );
}

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

标签： javascriptreactjs

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

现在您的代码应该可以正常工作并查看此页面以供将来参考