Şərti Render Edilmə

React-də siz ehtiyacınız olan davranışı ininkapsulyasiya edən fərqli komponentləri yarada bilərsiniz. Daha sonra, siz applikasiyanızın vəziyyətindən asılı olaraq bəzi komponentləri render edə bilərsiniz.

Şərti render etmə JavaScript-də işlədiyi kimi React-də işlənilir. Hazırki vəziyyəti təmsil etmək üçün elemetləri yaratmağa və React yenilənmələrini UI ilə uyğunlaşdırmaq üçün if və ya şərti operator kimi Javascript operatorlarını istifadə edin.

Bu iki komponentləri nəzərə alın:

function UserGreeting(props) {
  return <h1>Xoş Gəlmisiniz!</h1>;
}

function GuestGreeting(props) {
  return <h1>Xahiş edirik registrasiya edin.</h1>;
}

Biz, hansı istifadəçinin daxil olmasını nəzərə alaraq, bu komponentlərin hansınısa təsvir edən Greeting komponenti yaradacağıq:

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

CodePen-də yoxlayın

Bu nümunə isLoggedIn propunun dəyərindən asılı olaraq müxtəlif salamlama mətni render edir.

Element Dəyişənləri

Siz elementləri saxlamaq üçün dəyişənləri istifadə edə bilərsiniz. Bu sizə nəticənin qalan hissəsini dəyişmədən komponentin bir hissəsini şərti olaraq render etməyə imkan verəcək.

Yeni iki komponentləri təmsil edən Çıxış və “Daxil Ol” düymələrini nəzərə alın:

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

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Çıxış
    </button>
  );
}

Aşağıdakı misalda biz LoginControl adlanan state-li komponent yaradacağıq.

Bu hazırki vəziyyəti nəzərə alaraq <LoginButton /> və ya <LogoutButton /> render edəcək. Bu həmçinin əvvəlki misalda olan <Greeting />-i render edəcək:

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