Можно ли использовать if... else... в функции React render?

В принципе, у меня есть реагирующий компонент, его тело тела render() выглядит следующим образом: (Это мой идеальный, что означает, что он в настоящее время не работает)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImage) <MyImage />
            else <OtherElement/>
        </div>
    )
}

Ответ 1

Не так, но есть обходные пути. Там раздел в React docs об условном рендеринге, который вы должны посмотреть. Вот пример того, что вы могли бы сделать, используя inline if-else.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

Вы также можете иметь дело с ним внутри функции рендеринга, но перед возвратом jsx.

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

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

Также стоит упомянуть, что ZekeDroid воспитывает в комментариях. Если вы просто проверяете условие и не хотите отображать конкретный фрагмент кода, который не соответствует, вы можете использовать && operator.

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

Ответ 2

Сокращение для структуры if else работает как ожидалось в JSX

this.props.hasImage ? <MyImage /> : <SomeotherElement>

Вы можете найти другие варианты этого блога DevNacho, но чаще это делается с сокращением. Если вам нужно иметь более важное предложение if, вы должны написать функцию, которая возвращает компонент или компонент A или.

например:

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <overlayHoveredComponent />
    }else{
        return <overlayNotHoveredComponent />
    }
}

Вы можете разрушить свой overlayHovered из this.state, если вы укажете его как параметр. Затем выполните эту функцию в методе render():

renderComponentByState(this.state)

Ответ 3

Может быть, я слишком поздно здесь. Но я надеюсь, что это поможет кому-то. Сначала отделите эти два элемента.

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

Затем вы можете вызывать эти функции из функции render, используя инструкцию if else.

render(){
if(this.state.result){
  return this.renderResult();
}else{
  return this.renderQuiz();
}}

Это работает для меня.:)