வணக்கம்!
Parent Component -இல் இருந்து Child Component -இற்கு தகவலை பரிமாற்ற Props எவ்வாறு உதவுகின்றது என்பதை, இதற்கு முந்தைய பதிவான React Props vs State -இல் பார்த்தோம். இந்த பதிவின் மூலமாக, Child Component -இல் இருந்து Parent Component -இற்கு எவ்வாறு தகவலை பரிமாறுவது என்பதை தெரிந்துக்கொள்ளலாம்.
React Props with State
Parent Component -இல் தகவல்களை சேமிக்கவும், பயன்படுத்தவும் State பயன்படுகின்றது என்பது அறிந்த ஒன்றாகும். அதுபோல, Props மூலமாக, Child Components -இல் Parent Components உடைய தகவல்கள் மற்றும் Function -கள் பயன்படுத்தலாம் என்பதும் அறிந்த ஒன்றாகும்.
இது Parent to Child Component -களுக்கு தகவல்களை பரிமாற்றும் வழிமுறையாகும். தற்பொழுது Child to Parent Component -இற்கு தகவல்களை எவ்வாறு பரிமாற்றுவது என்பதை காணலாம்.
setState Function
Parent Component State உடைய setState Function ஆகும். இந்த setState Function -ஐ நேரடியாக Child Component -இற்கு Props மூலமாக பரிமாறி தகவலை பெற இயலும்.
 |
| Parent Component |
மேற்கண்ட புகைப்படத்தில், HomeComponent என்கின்ற Parent Component -இல் title என்கின்ற State உருவாக்கப்பட்டுள்ளது. இந்த state உடைய Value மாற்றியமைக்க உதவுகின்ற setTitle என்கின்ற function ஆனது Child Component -இற்கு அனுப்பப்படுகின்றது.
 |
| Child Compoent |
ChildComponent -இல் handleChange Function மூலமாக, Input Field மூலமாக பெறப்படுகின்ற Value ஆனது setTitle Function மூலமாக, Parent Component -இற்கு தகவல் ஆனது பரிமாற படுகின்றது.
 |
| Child to Parent Data Passing with setState Function |
குறிப்பு: TextFieldComponent என்பது input field -இற்காக உருவாக்கப்பட்ட ஒரு UI Component ஆகும். அடுத்தடுத்த பதிவின் மூலமாக, Reusable UI Components -களை எவ்வாறு உருவாக்கலாம் என்பதை பார்க்கலாம்.
Functions with Params
Parent Component -இல் உருவாக்கப்படும் Functions -களின் Params மூலமாக தகவலை பெற இயலும். இதற்கும், Function -ஐ நேரடியாக Child Component -இற்கு Props மூலமாக பரிமாற வேண்டும்.
 |
| Child to Parent Data Passing with Functions Params |
மேற்கண்ட புகைப்படத்தில், handleChange என்கின்ற Function -ஐ Child Component -இற்கு அனுப்பி, அதன் மூலமாக எவ்வாறு தகவலானது, State -இல் Update செய்யப்படுகின்றது என்பதை பார்க்கலாம்.
குறிப்பு: Function with Param மூலமாக, தகவலை பெறுவதே சிறந்த வழியாகும்.
இந்த முறையின் மூலமாக, child Component -ஐ பல்வேறு Components களுக்கு பயன்படுத்தலாம். title props -ஐ Value என்று பெயர்மாற்றம் செய்து, value -ஐ TextField Component -இல் கொடுப்பது சிறந்தது.
 |
| Initial Result |
மேற்கண்ட புகைப்படத்தில், Initial Result ஆனது காண்பிக்கப்பட்டுள்ளது. கீழ்கண்ட புகைப்படத்தில், Input Field -இல் Value ஆனது கொடுக்கப்படும் பொழுதே title state -இல் Value ஆனது Update செய்யப்பட்டு திரையில் தோன்றுவதை காணலாம்.
 |
| Web Result |
Re-Render Issues:
இதுபோன்று தகவல்களை பெரும்பொழுது, React Components ஆனது ஒவ்வொரு முறையும் புதுப்பிக்கப்படுகின்றன. இதனால் Performance -இல் பாதிப்பு ஏற்படும். இதை தவிர்க்க useCallback() Hooks ஆனது பயன்படுத்தப்படுகின்றது.
useCallback() Hooks பற்றி, அடுத்தடுத்த பதிவின் மூலமாக தெரிந்துக்கொள்ளலாம்.
Conclusion
இந்த பதிவின் மூலமாக, Child Component -இல் இருந்து Parent Component -இற்கு தகவலை எவ்வாறு பரிமாற்றம் செய்யலாம் என்பதை அறிந்துக்கொண்டு இருப்பீர்கள்.
0 Comments