الخطوة 4 تحديد مالك الحالة | منهجية التفكير بطريقة React خطوة بخطوة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

الخطوة 4 — تحديد المكون المالك للحالة: لكل متغير حالة استخلصته في الخطوة الثالثة، حدد جميع المكونات التي تعتمد عليه في عرضها، ثم ضع الحالة في أقرب مكون أب مشترك يجمعها.

يحتاج SearchBar إلى قراءة نص البحث وخيار التصفية لعرضهما، ويحتاج CourseTable إلى القائمة المشتقة منهما؛ لذا يستقر خطافا useState() في الأب الجامع لهما FilterableCatalog.

الصف 2 كود برمجي

HTML

function FilterableCatalog({ courses }) {
  const [query, setQuery] = useState('');
  const [freeOnly, setFreeOnly] = useState(false);
  const visible = courses.filter((c) =>
    (!freeOnly || c.free) &&
    c.title.toLowerCase().includes(query.toLowerCase())
  );
  return <CourseTable courses={visible} />;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Step Four Where State Lives الخطوة 4 تحديد مالك الحالة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (منهجية التفكير بطريقة React خطوة بخطوة)