¿Es posible usar la declaración if ... else ... en la función de renderización de React?

Básicamente, tengo un componente de reacción, su render()cuerpo de función es el siguiente: (Es mi ideal, lo que significa que actualmente no funciona)

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

No exactamente así, pero hay soluciones. Hay una sección en los documentos de React sobre renderizado condicional que debería echarle un vistazo. Aquí tienes un ejemplo de lo que podrías hacer usando if-else en línea.

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

También puede manejarlo dentro de la función de renderizado, pero antes de devolver el jsx.

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

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

También vale la pena mencionar lo que ZekeDroid mencionó en los comentarios. Si solo está verificando una condición y no desea representar un fragmento de código en particular que no cumple, puede usar la extensión && operator.

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

De hecho, hay una manera de hacer exactamente lo que pide OP. Simplemente renderice y llame a una función anónima así:

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Puede hacer cualquier cosa usando la conditionaldeclaración como if, else:

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

Debe recordar sobre el operador TERNARY

:

por lo que su código será así,

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

Si desea que una condición muestre elementos, puede usar algo como esto.

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

Luego llame al método de ayuda dentro de la función render.

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

O puede utilizar otra forma de condición dentro de la devolución.

{this.props.hasImage ? <element1> : <element2>}

La abreviatura de una estructura if else funciona como se esperaba en JSX

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

Puedes encontrar otras opciones en esta entrada de blog de DevNacho , pero es más común hacerlo con la taquigrafía. Si es necesario tener una más grande cláusula si debe escribir una función que retorna o un componente o B. componente

por ejemplo:

this.setState({overlayHovered: true});

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

Puede desestructurar su overlayHovered de this.state si lo da como parámetro. Luego ejecute esa función en su método render ():

renderComponentByState(this.state)

Si necesita más de una condición, entonces puede probar esto

https://www.npmjs.com/package/react-if-elseif-else-render

import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';

class Example extends Component {

  render() {
    var i = 3; // it will render '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}

Tipo 1: If estilo de declaración

{props.hasImage &&

  <MyImage />

}

Tipo 2: If else estilo de declaración

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

Puede que sea demasiado tarde aquí. Pero espero que esto ayude a alguien. Primero separe esos dos elementos.

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

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

Luego puede llamar a estas funciones desde la función de renderización usando la instrucción if else.

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

Esto funciona para mi. :)

Usé un operador ternario y me está funcionando bien.

> {item.lotNum == null ? ('PDF'):(item.lotNum)}

También puede usar el operador condicional (ternario) dentro del operador condicional en caso de que tenga 2 dependencias diferentes.

{
(launch_success)
  ?
  <span className="bg-green-100">
    Success
  </span>
  :
  (upcoming)
    ?
    <span className="bg-teal-100">
      Upcoming
    </span>
    :
    <span className="bg-red-100">
      Failed
    </span>
}

Intente ir con el caso del interruptor o el operador ternario

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // updated code works here
            {(() => {
                        switch (this.props.hasImage) {
                            case (this.props.hasImage):
                                return <MyImage />;
                            default:
                                return (
                                   <OtherElement/>; 
                                );
                        }
                    })()}
        </div>
    )
}

Esto funcionó para mí y debería funcionar para usted. Prueba Ternary Operator