קוד התנין הבא יהיה בניסוח מעט שונה. כלומר זה לא יהיה איזה מדריך משעמם חלילה. כפי שאתם כבר הבנתם ומי שמכיר את האתר שלנו . מי שלא מכיר, מוזמן לקרוא את להכיר אותנו כי אנחנו ממש סבבה – קודודייל.
אז סה"כ ישבנו וחשבנו איך יהיה לכם יותר אפקטיבי. אז הוספנו לכם פה ווידגט חמוד שיאפשר לכם לקבל לינקים לפוסטים קשורים שככה גם תוכלו לדפדף וללמוד יותר טיפים וטריקים מאותו הנושא כך שזה מעיין מדריך. אז בלי חפירות מיותרות להלן הטיפ הבא.
פוסטים קשורים | מדריך react | ריאקט
העברת מידע בין קומפוננטות ריאקטיות באצמעות props
נציג פה 2 דוגמאות, מכוון שחלקם אוהבים לרשום ב TSX וחלקכם ב JSX. אז החלטנו לא לקפח אף אחד ולשים שני גרסות.
גרסאת הTSX :
import React, {Component} from 'react'; // blockChild קומפוננטת ילד interface Props { name: string; } export const blockChild : Resct.FC<Props> = ({}) => { return (<h1>Hello {props.name}!</h1>); } // APP קומפוננטת האבא interface someProps { name: string; } export default class App extends Component<someProps> { constructor(props: someProps) { super(props) } render() { return ( <React.Fragment> <blockChild name='תנין קוד'/> <blockChild name='תנינת קוד'/> </React.Fragment> ); } }
גרסאת הJSX:
import React, {Component} from 'react'; // blockChild קומפוננטת ילד export const blockChild = (props) => { return (<h1>Hello {props.name}!</h1>); } // APP קומפוננטת האבא export default class App extends Component { constructor(props) { super(props) } render() { return ( <React.Fragment> <blockChild name='תנין קוד'/> <blockChild name='תנינת קוד'/> </React.Fragment> ); } }
כמה פשוט וקל להעביר מידע עם פרופס! שימו לב שזה עובד רק בכיוון אחד, מהאבא כלפי מטה. כמו כן אין props הוא מידע קבוע ואיזה מתעדכן.לכן לא מומלץ לנסות ולשנות props . במידה ואתם צריכים מידע שמתעדכן ומרנדר את התצוגה – השתמשו כמובן בstate. והעביר אל הפרופס.
כמובן בהמשך הטיפים נדבר על איך להעביר מידע בסטייס וגם מילד לאבא בקלות.
בהצלחה🐊