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