شرح صفوف ومحتوى الفقرة
كثيراً ما يحتاج مكونان شقيقان إلى تنسيق حالتهما معاً؛ كقائمة أكورديون يتطلب فتح أحد ألواحها إغلاق اللوح الآخر تلقائياً، أو حقلي تحويل وحدات متزامنين. وطالما احتفظ كل مكون فرعي بمتغير useState() محلي معزول داخله، فلن يملك أي شقيق وسيلة لإبلاغ شقيقه بالتغيير.
في نموذج تدفق البيانات أحادي الاتجاه في React لا تعدل المكونات الشقيقة بعضها مباشرة، بل تتنسق عبر المكون الأب المشترك بينها.
HTML
function SyncedLengths() {
const [m, setM] = useState(2);
return (
<div>
<UnitField unit="m" value={m} onChange={setM} />
<UnitField unit="cm" value={m * 100}
onChange={(cm) => setM(cm / 100)} />
</div>
);
}