Как изменить кнопку входа в систему кнопку выхода в React

Question

Привет, я создаю одностраничное приложение с использованием реакции. js Впервые я очень плохо борюсь с синтаксисом. Я просто хочу поменять кнопку входа на кнопку выхода, когда пользователь вошел в систему. Где я ошибаюсь?

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

  return (
    if (isLoggedIn) {
      <div className="authentication">
        <button>Logout</button>
      </div>
    } else {
      <a href='http://localhost:8888'>
        <button>Login</button>
      </a>
    }
  );
}

Answer 1

Вы можете создать некоторые функциональные компоненты и использовать их как:

function LogoutBtn(props) {
  return <div className="authentication"><button >Logout </button></div>;
}

function LoginBtn(props) {
  return <a href='http://localhost:8888'><button>Login </button></a>;
}

function AuthBtn(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <LogoutBtn />;
  }
  return <LoginBtn />;
}

, а затем внутри render метод использовать его как:

render() {
    const {isLoggedIn} = this.state;
    return <AuthBtn isLoggedIn={isLoggedIn} />;
}

Answer 2

Вы должны использовать оператор if перед использованием возврата:

render() {
  const { isLoggedIn } = this.state;

  if (isLoggedIn) {
    return (
      <div className="authentication">
        <button>Logout</button>
      </div>
    );
  }

  return (
    <a href='http://localhost:8888'>
      <button>Login</button>
    </a>
  );
}

Лучший способ - использовать троичный оператор в блоке возврата:

render() {
  const { isLoggedIn } = this.state;

  return (
    <div>
      {
        isLoggedIn 
          ? (
              <div className="authentication">
                <button>Logout</button>
              </div>
            )
          : ( 
              <a href='http://localhost:8888'>
                <button>Login</button>
              </a>
            )
      }
    </div>
  );
}

А лучшим способом может быть:

handleAuth = () => {
  const { isLoggedIn } = this.state;

  if(isLoggedIn) {
    // Do logout
  } else {
    // Do login
  }
}

render() {
  const { isLoggedIn } = this.state;

  return (
    <button onClick={handleAuth}>
      {isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}

Answer 3

if является оператором, и вы можете использовать оператор после return, вам следует использовать троичный оператор.

Также вы вкладываете кнопку внутри a. Вы должны использовать href непосредственно на кнопке

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

    return (
      isLoggedIn ? 
      <div className="authentication">
        <button >Logout </button>
      </div>
      : 
      <button href='http://localhost:8888'>Login </button>
     )
}