React.js Koşullu Render İşlemi

Conditional rendering, bir React uygulamasında belirli koşullar sağlandığında farklı bileşenlerin veya içeriklerin render edilmesini sağlayan bir tekniktir. Bu, genellikle bir if ifadesi veya üçlü operatör kullanılarak yapılır.

Basit bir örnekte, bir kullanıcının giriş yapmış olup olmadığını kontrol edeceğiz ve buna göre farklı bir hoş geldiniz mesajı veya giriş formu göstereceğiz.

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }

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

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

  render() {
    const { isLoggedIn } = this.state;

    return (
      <div>
        <h1>Conditional Rendering Example</h1>
        {isLoggedIn ? (
          <div>
            <p>Welcome, User!</p>
            <button onClick={this.handleLogout}>Logout</button>
          </div>
        ) : (
          <div>
            <p>Please login to continue</p>
            <button onClick={this.handleLogin}>Login</button>
          </div>
        )}
      </div>
    );
  }
}

export default App;

Bu kodda, isLoggedIn adında bir state değişkeni tanımladık ve başlangıçta false olarak ayarladık. handleLogin ve handleLogout adında iki fonksiyon tanımladık, bu fonksiyonlar, kullanıcının giriş yapmasını ve çıkış yapmasını sağlar ve isLoggedIn state’ini günceller.

Render metodunda, isLoggedIn durumuna bağlı olarak, hoş geldiniz mesajı ve çıkış yapma düğmesi ya da giriş formu ve giriş düğmesi gösteren bir if ifadesi bulunmaktadır. Bu durum, kullanıcının giriş yapmış olup olmadığına bağlı olarak değişir.

Share on Facebook

Tweet