React/conditional rendering

بإمكانك في React إنشاء مُكوِّنات مميّزة تُغلِّف السلوك الذي تريده، ثم بعد ذلك تُصيِّر فقط أجزاء منها اعتمادًا على حالة تطبيقك.

يعمل التصيير الشرطي في React بنفس الطريقة التي تعمل فيها التعابير الشرطيّة في JavaScript، حيث تستطيع استخدام مُعامِلات JavaScript مثل if أو المُعامِل الشرطي لإنشاء عناصر تُمثِّل الحالة الحاليّة، ثمّ تدع React تُحدِّث واجهة المستخدم لمُطابقتها.

فلننظر إلى هذين المُكوِّنين:

function UserGreeting(props) {
  return <h1>أهلًا بعودتك!</h1>;
}

function GuestGreeting(props) {
  return <h1>يرجى التسجيل في الموقع</h1>;
}

سنُنشِئ مُكوِّن الترحيب Greeting الذي يعرض واحدًا من هذين المُكوِّنين بحسب حالة المستخدم إن كان قيد تسجيل الدخول أم لا:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // جرب التغيير إلى isLoggedIn={true}
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

جرِّب المثال على موقع CodePen.

يعرض هذا المثال ترحيبًا مختلفًا اعتمادًا على قيمة الخاصيّة isLoggedIn.

متغيّرات العناصر

بإمكانك استخدام المتغيّرات لتخزين العناصر، يُساعد هذا على تصيير جزء من المُكوِّن بشكل شرطي بحيث لا تتغير بقية ناتجه.

فلنأخذ هذين المُكوِّنين الجديدين اللذين يُمثِّلان أزرار تسجيل الخروج (Logout) وتسجيل الدخول (Login):

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      تسجيل الدخول
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      تسجيل الخروج
    </button>
  );
}

في المثال السّابق سنُنشِئ مُكوِّن له حالة وسنُسمّيه LoginControl. سيُصيِّر هذا المُكوِّن إمّا ‎<LoginButton />‎ أو ‎<LogoutButton />‎ بحسب حالته الحاليّة، سيُصيِّر أيضًا ‎<Greeting />‎ من المثال السّابق:

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

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

جرِّب المثال على موقع CodePen.

يُعدُّ تعريف متغير واستخدام جملة if طريقةً جيّدةً لتصيير المُكوِّن بشكلٍ شرطي، ولكن أحيانًا قد تريد استخدام صياغة مختصرة أكثر. هناك بعض الطرق لوضع الجمل الشرطية بشكل سطري (inline) في JSX سنشرحها الآن.

جملة if السطرية مع المعامل المنطقي &&

تستطيع تضمين أي تعابير في JSX عن طريق تغليفها بين قوسين، يتضمن هذا المعامل المنطقي && في JavaScript، حيث يكون مفيدا لتضمين عنصر بشكل شرطي:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>أهلًا!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          لديك {unreadMessages.length} رسائل غير مقروءة.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

جرب المثال على موقع CodePen.

يعمل هذا المثال بسبب تقييم التعبير true && expression إلى قيمة expression دومًا في JavaScript،  وتقييم التعبير false && expression دومًا إلى false. ولهذا إن كان الشرط صحيحًا (true) فسيظهر ضمن الناتج العنصر الموجود بعد المعامل &&، وإن كان الشرط خاطئًا (false) ستتجاهله React وتتخطاه.