Operator ternary di kelas html

Question

Di React, Anda dapat membuat komponen berbeda yang mengenkapsulasi perilaku yang Anda perlukan. Kemudian, Anda hanya dapat merender beberapa di antaranya, bergantung pada status aplikasi Anda

Table of Contents Show

Variabel Elemen
Inline If dengan Logical && Operator
Inline If-Else dengan Operator Bersyarat
Mencegah Komponen dari Rendering
Bagaimana cara menggunakan operator ternary di kelas HTML?
Bagaimana Anda menambahkan operator ternary di CSS?
Bisakah kita menggunakan operator ternary di objek JavaScript?
Bagaimana Anda menggunakan contoh operator ternary?

Rendering bersyarat di React bekerja dengan cara yang sama dengan kondisi di JavaScript. Gunakan operator JavaScript seperti if atau operator kondisional untuk membuat elemen yang mewakili keadaan saat ini, dan biarkan React memperbarui UI agar sesuai dengannya

Pertimbangkan kedua komponen ini

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

Kami akan membuat komponen

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_0 yang menampilkan salah satu dari komponen ini bergantung pada apakah pengguna masuk

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_

Coba di CodePen

Contoh ini membuat salam yang berbeda tergantung pada nilai

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

1 prop

Variabel Elemen

Anda dapat menggunakan variabel untuk menyimpan elemen. Ini dapat membantu Anda merender bagian komponen secara kondisional sementara output lainnya tidak berubah

Pertimbangkan dua komponen baru ini yang mewakili tombol Logout dan Login

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_

Pada contoh di bawah ini, kita akan membuat

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

2

Itu akan membuat

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_3 atau

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

4 tergantung pada kondisi saat ini. Itu juga akan membuat

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_5 dari contoh sebelumnya

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

_

Coba di CodePen

Saat mendeklarasikan variabel dan menggunakan pernyataan if adalah cara yang bagus untuk merender komponen secara kondisional, terkadang Anda mungkin ingin menggunakan sintaks yang lebih pendek. Ada beberapa cara untuk menyejajarkan ketentuan di JSX, yang dijelaskan di bawah ini

Inline If dengan Logical && Operator

Anda dapat membungkusnya dengan kurung kurawal. Ini termasuk operator logis

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_7 JavaScript. Ini bisa berguna untuk memasukkan elemen secara kondisional

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

const messages = ['React', 'Re: React', 'Re:Re: React'];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

Coba di CodePen

Ini berfungsi karena dalam JavaScript,

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

_8 selalu mengevaluasi ke

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

9, dan

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

0 selalu mengevaluasi ke

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

1

Oleh karena itu, jika kondisinya adalah

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_2, elemen tepat setelah

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

7 akan muncul di output. Jika

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

1, React akan mengabaikan dan melewatkannya

Perhatikan bahwa mengembalikan ekspresi palsu masih akan menyebabkan elemen setelah

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

7 dilewati tetapi akan mengembalikan ekspresi palsu. Pada contoh di bawah ini,

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_6 akan dikembalikan oleh metode render

render() {
  const count = 0;  return (
    <div>
      {count && <h1>Messages: {count}</h1>}    </div>
  );
}

Inline If-Else dengan Operator Bersyarat

Metode lain untuk merender elemen sebaris secara kondisional adalah dengan menggunakan operator kondisional JavaScript

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

7

Dalam contoh di bawah ini, kami menggunakannya untuk merender blok kecil teks secara kondisional

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>
  );
}

Itu juga dapat digunakan untuk ekspresi yang lebih besar meskipun kurang jelas apa yang terjadi

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

Sama seperti di JavaScript, terserah Anda untuk memilih gaya yang sesuai berdasarkan apa yang Anda dan tim Anda anggap lebih mudah dibaca. Juga ingat bahwa setiap kali kondisi menjadi terlalu rumit, mungkin saat yang tepat untuk melakukannya

Mencegah Komponen dari Rendering

Dalam kasus yang jarang terjadi, Anda mungkin ingin komponen menyembunyikan dirinya sendiri meskipun dirender oleh komponen lain. Untuk melakukan ini, kembalikan

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

8 alih-alih hasil rendernya

Pada contoh di bawah ini,

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_9 dirender bergantung pada nilai prop yang disebut

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

0. Jika nilai prop adalah

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_1, maka komponen tidak akan dirender

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

Coba di CodePen

Mengembalikan

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

_8 dari metode

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

3 komponen tidak memengaruhi pengaktifan metode siklus hidup komponen. Misalnya

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

_4 akan tetap dipanggil

Bagaimana cara menggunakan operator ternary di kelas HTML?

Operator kondisional (ternary) adalah satu-satunya operator JavaScript yang menggunakan tiga operan. kondisi diikuti dengan tanda tanya ( ? ), kemudian ekspresi untuk dieksekusi jika kondisi benar diikuti dengan titik dua (. ), dan terakhir ekspresi yang akan dijalankan jika kondisi salah .

Bagaimana Anda menambahkan operator ternary di CSS?

Di web modern, Anda dapat meniru operator ternary dalam CSS murni dengan menggunakan variabel CSS ekstra . Sebagai contoh. kiri. calc( 0px * var(--myVariable) + 173px * (1 - var(--myVariable)) ); .

Bisakah kita menggunakan operator ternary di objek JavaScript?

Dengan menggunakan operator ternary, Anda dapat memeriksa apakah suatu variabel bukan null atau tidak terdefinisi hanya dengan meneruskan nama variabel pada posisi operand kondisi. This is especially useful when the variable is an object. If you try to access a property on an object that's actually null or undefined , an error will occur.

Bagaimana Anda menggunakan contoh operator ternary?

Ini membantu untuk menganggap operator ternary sebagai cara singkat atau menulis pernyataan if-else. Berikut adalah contoh pengambilan keputusan sederhana menggunakan if and else. int a = 10, b = 20, c; . This example takes more than 10 lines, but that isn't necessary.

kode html