העברת נתונים בין קומפוננטות בריאקט היא חלק מרכזי ביכולת ליצור אפליקציות מורכבות ואינטראקטיביות. המון פעמים אנו נרצה ליישם רכיבים שמעבירים נתונים ביניהם, לפעמים הרכיבים יהיו "אב ובן" ולפעמים לא יהיה בינהם קשר ישיר באפליקציה.
אב ובן, הכוונה היא שקומפוננטה אחת מתארחת אצל הקומפוננטה השניה. הקומפוננטה המארחת היא ה"אב" ומה שבתוכו זה "ילד"
במאמר זה נסקור שיטות שונות להעברת נתונים בין קומפוננטות, נציג דוגמאות קוד ונסביר כיצד ליישם כל שיטה בצורה יעילה.
שימוש ב-props להעברת נתונים מקומפוננטת הורה לילד
השיטה הבסיסית והנפוצה ביותר להעברת נתונים היא באמצעות props. props מאפשרים לנו להעביר נתונים מקומפוננטת הורה לקומפוננטת ילד בצורה פשוטה וברורה.
אם אתם לא יודעים עדיין מה זה Props מוזמנים לקרוא כאן
השיטה מתארת מצב בו יש קומפוננטה אחת שמארחת קומפוננטה אחרת, ורוצים שהמידע יזרום מהמארחת (אב) לקומפוננטה שבתוכה (ילד)
לדוגמא:
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const data = "Hello from Parent";
return (
<div>
<h1>Parent Component</h1>
<ChildComponent message={data} />
</div>
);
};
export default ParentComponent;
// ChildComponent.js
import React from 'react';
const ChildComponent = ({ message }) => {
return (
<div>
<h2>Child Component</h2>
<p>{message}</p>
</div>
);
};
export default ChildComponent;
שימוש ב-callbacks להעברת נתונים מקומפוננטת ילד להורה
זה המקרה ההפוך. כאשר יש צורך להעביר נתונים מקומפוננטת ילד לקומפוננטת הורה, נשתמש בפונקציות callback שמועברות כ-props.
דוגמא:
// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [data, setData] = useState("");
const handleData = (childData) => {
setData(childData);
};
return (
<div>
<h1>Parent Component</h1>
<ChildComponent sendDataToParent={handleData} />
<p>Data from child: {data}</p>
</div>
);
};
export default ParentComponent;
// ChildComponent.js
import React, { useState } from 'react';
const ChildComponent = ({ sendDataToParent }) => {
const [inputValue, setInputValue] = useState("");
const handleInputChange = (e) => {
setInputValue(e.target.value);
sendDataToParent(e.target.value);
};
return (
<div>
<h2>Child Component</h2>
<input type="text" value={inputValue} onChange={handleInputChange} />
</div>
);
};
export default ChildComponent;
שימוש ב-context להעברת נתונים בין קומפוננטות "רחוקות"
React Context API מאפשר לנו להעביר נתונים בין קומפוננטות שאינן במערכת יחסים ישירה של הורה-ילד.
דוגמה:
// MyContext.js
import React, { createContext, useState } from 'react';
export const MyContext = createContext();
export const MyProvider = ({ children }) => {
const [data, setData] = useState("Hello from Context");
return (
<MyContext.Provider value={{ data, setData }}>
{children}
</MyContext.Provider>
);
};
// ParentComponent.js
import React, { useContext } from 'react';
import { MyContext } from './MyContext';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const { data } = useContext(MyContext);
return (
<div>
<h1>Parent Component</h1>
<p>Data from context: {data}</p>
<ChildComponent />
</div>
);
};
export default ParentComponent;
// ChildComponent.js
import React, { useContext } from 'react';
import { MyContext } from './MyContext';
const ChildComponent = () => {
const { data, setData } = useContext(MyContext);
return (
<div>
<h2>Child Component</h2>
<p>{data}</p>
<button onClick={() => setData("Data updated by Child")}>
Update Data
</button>
</div>
);
};
export default ChildComponent;
// App.js
import React from 'react';
import { MyProvider } from './MyContext';
import ParentComponent from './ParentComponent';
const App = () => {
return (
<MyProvider>
<ParentComponent />
</MyProvider>
);
};
export default App;
סיכום – העברת נתונים באפליקציית React
במאמר זה סקרנו את השיטות העיקריות להעברת נתונים בין קומפוננטות בריאקט: שימוש ב-props, שימוש ב-callbacks, ושימוש ב-Context API. שליטה בטכניקות אלו יאפשרו לכם לפתח אפליקציות מורכבות יותר.
אם מעניין אותכם להתמקצע בריאקט או לעשות הסבה טכנולוגית לצוות שלכם, מוזמנים לדבר איתנו על קורס React