Apakah mungkin untuk menggunakan pernyataan if… else… dalam fungsi render React?

Pada dasarnya saya punya komponen react, render()fungsinya body-nya seperti di bawah ini: (Ini ideal saya, yang artinya saat ini tidak berfungsi)

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

Tidak persis seperti itu, tetapi ada beberapa solusi. Ada bagian di dokumen React tentang rendering bersyarat yang harus Anda lihat. Berikut adalah contoh dari apa yang dapat Anda lakukan menggunakan inline if-else.

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

Anda juga bisa menanganinya di dalam fungsi render, tetapi sebelum mengembalikan jsx.

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

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

Perlu juga disebutkan apa yang dikemukakan ZekeDroid di komentar. Jika Anda hanya memeriksa suatu kondisi dan tidak ingin merender bagian kode tertentu yang tidak sesuai, Anda dapat menggunakan && operator.

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

Sebenarnya ada cara untuk melakukan apa yang diminta OP. Render dan panggil fungsi anonim seperti ini:

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

Anda dapat membuat apa-apa menggunakan conditionalpernyataan seperti 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>
    );
  }

Anda harus ingat tentang operator TERNARY

:

jadi kodemu akan seperti ini,

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

Jika Anda ingin kondisi untuk menampilkan elemen, Anda dapat menggunakan sesuatu seperti ini.

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

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

Kemudian panggil metode bantuan di dalam fungsi render.

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

Atau Anda dapat menggunakan cara lain untuk mengembalikan kondisi dalam.

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

Singkatan dari struktur if else berfungsi seperti yang diharapkan di JSX

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

Anda dapat menemukan opsi lain di posting blog DevNacho ini , tetapi lebih umum melakukannya dengan steno. Jika Anda perlu memiliki klausa if yang lebih besar, Anda harus menulis fungsi yang mengembalikan atau komponen A atau komponen B.

sebagai contoh:

this.setState({overlayHovered: true});

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

Anda dapat merusak overlayHovered Anda dari this.state jika Anda memberikannya sebagai parameter. Kemudian jalankan fungsi itu dalam metode render () Anda:

renderComponentByState(this.state)

Jika Anda membutuhkan lebih dari satu syarat, maka Anda bisa mencobanya

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

Tipe 1: If gaya pernyataan

{props.hasImage &&

  <MyImage />

}

Tipe 2: If else gaya pernyataan

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

Mungkin saya terlambat di sini. Tapi saya harap ini akan membantu seseorang. Pertama-tama pisahkan kedua elemen tersebut.

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

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

Kemudian Anda dapat memanggil fungsi-fungsi ini dari fungsi render menggunakan pernyataan if else.

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

Ini berhasil untuk saya. :)

Saya menggunakan operator terner dan berfungsi dengan baik untuk saya.

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

Anda juga dapat menggunakan operator kondisional (terner) di dalam operator bersyarat jika Anda memiliki 2 dependensi yang berbeda.

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

Coba gunakan kasus Switch atau operator terner

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

Ini berhasil untuk saya dan harus bekerja untuk Anda yang lain. Coba Operator Ternary