מצב הרמה למעלה: כיצד מגיבים רכיבי הילד מתקשרים עם ההורים

React משתמשת בזרימת נתונים חד כיוונית מהורה לילד, לעולם לא מילד להורה. אבל מה קורה כשילד צריך לתקשר עם ההורים שלו?

למד כיצד להרים את המצב כדי לאפשר לרכיב צאצא לשלוח נתונים לרכיב אב.

רכיבים ב-React

React מארגן רכיבים בהיררכיה שבה רכיבי צאצא מקננים בתוך רכיבי אב. היררכיה זו מהווה את אבני הבניין של ממשק המשתמש של האפליקציה.

</ParentComponent>

כל רכיב צאצא מקבל נתונים, המכונים אביזרים, מהרכיב האב שלו. אביזרי React יכולים להחזיק סוגים שונים של נתונים כגון מערכים, אובייקטים, מחרוזות או אפילו פונקציות. רכיב הילד אינו יכול לתפעל ישירות את הנתונים הללו.

שקול את הרכיב הבא, הנקרא כפתור נגד:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

הרכיב שומר על ערך מצב בשם לספור אשר גדל בכל פעם שמשתמש לוחץ על הכפתור.

נניח שקיננת את רכיב ה-CounterButton בתוך רכיב אחר בשם Home:

const Home = () => {
return (

 )
}

אם רצית להציג את ערך הספירה מה- כפתור נגד רכיב בתוך רכיב הבית, תתקל באתגר.

כאמור, React אוכפת זרימת נתונים חד כיוונית מהורה לילד. לכן, רכיב ה-CounterButton אינו יכול לשתף ישירות את ערך מצב הספירה עם רכיב הבית.

כדי לעקוף את זה, אתה צריך להרים את המדינה.

כיצד להרים מצב עד לשיתוף נתונים בין רכיבים

מצב הרמה מתייחס להזזת מצב של רכיב גבוה יותר בעץ הרכיב, לרכיב אב. לאחר שתבטל את המצב, תוכל להעביר אותו לרכיבי צאצא כערכי אב.

בדוגמה המונה מקודם, תצטרך להעביר את מצב הספירה ואת ה- handleIncrement פונקציה לרכיב הבית. לאחר מכן תצטרך להעביר את פונקציית handleIncrement לרכיב CounterButton בתור אבזר.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

לאחר מכן, עליך לשנות את רכיב ה-CounterButton כדי לקבל את הפונקציה handleIncrement ולקרוא לה כאשר משתמש לוחץ על הכפתור.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

הרמת המדינה מרכזת את הנתונים ומעבירה את האחריות של לנהל את המדינה מהילד להורה.

מלבד לעזור לך להציג נתונים ברכיב האב, הסרת המצב יכולה לעזור לך לסנכרן נתונים על פני מספר רכיבים.

נניח שהיה לך רכיב כותרת עליונה ותחתונה מקונן בתוך רכיב האב וכל אחד מהרכיבים הללו מציג גם את הספירה המשותפת. כדי לחלוק את הערך הזה, אתה יכול להעביר אותו לרכיבים אלה כאביזרים.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

עם זאת, אתה צריך להיות זהיר להרים את המדינה כדי לא להגיע למצב המכונה קידוח משענת.

אתגר קידוח הפרופס

ככל שהאפליקציה שלך תגדל, אתה עשוי לגלות שרכיבים מרובים עמוק יותר בעץ הרכיבים זקוקים לגישה למצב משותף. כדי להפוך את המצב המשותף הזה לזמין לרכיבים המקוננים, תצטרך להעביר אביזרים דרך רכיבי ביניים. תהליך זה יכול להוביל לקידוח משענת.

קידוח פרוס מקשה לעקוב אחר אופן זרימת הנתונים ויכול להוביל לקוד קשה לתחזוקה.

כדי להפחית קידוחי אבזר אך עדיין לשתף נתונים מכל רכיבים, שקול להשתמש בהקשר של React. ההקשר של React מאפשר לך לרכז את המצב כך שהוא זמין בכל האפליקציה.

שיתוף נתונים ב-React באמצעות אביזרים

כאשר אתה צריך לשתף נתונים מרכיב צאצא עם רכיב האב שלו, הרם את המצב לרכיב האב ולאחר מכן העביר את הפונקציה שמעדכנת את המצב לרכיב הבן בתור אביזרים.

במקרים בהם רכיב הצאצא מקונן עמוק בעץ הרכיבים, השתמשו בכלי ניהול מצבים כמו React Context או בכלי של צד שלישי כמו React Redux כדי למנוע קידוח משענת.