ரியாக்ட் cloneElement: டைனமிக் UI-களுக்கான எலிமென்ட் மாற்றத்தில் தேர்ச்சி பெறுதல்

ரியாக்ட் டெவலப்பரின் கருவிப் பெட்டியில் React.cloneElement ஒரு சக்திவாய்ந்த கருவியாகும். இது ஏற்கனவே உள்ள ஒரு ரியாக்ட் எலிமென்ட்டை அடிப்படையாகக் கொண்டு ஒரு புதிய ரியாக்ட் எலிமென்ட்டை உருவாக்க உங்களை அனுமதிக்கிறது, அசல் எலிமென்ட்டை நேரடியாக மாற்றாமல் அதன் props மற்றும் children-ஐ சேர்க்கலாம் அல்லது மாற்றியமைக்கலாம். இந்த மாற்றமுடியாத தன்மை (immutability) ரியாக்ட்டின் ஒரு முக்கிய கொள்கையாகும், மேலும் இது யூகிக்கக்கூடிய மற்றும் பராமரிக்கக்கூடிய குறியீட்டிற்கு பங்களிக்கிறது. இந்த விரிவான வழிகாட்டி cloneElement-ன் நுணுக்கங்களை ஆராய்ந்து, அதன் பயன்பாட்டு வழக்குகள், நன்மைகள் மற்றும் சிறந்த நடைமுறைகளை ஆராயும்.

ரியாக்ட் எலிமென்ட்கள் மற்றும் காம்போனென்ட்களைப் புரிந்துகொள்ளுதல்

cloneElement-க்குள் நுழைவதற்கு முன், ரியாக்ட் எலிமென்ட்கள் மற்றும் காம்போனென்ட்களின் அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது அவசியம்.

ரியாக்ட் எலிமென்ட்கள்: ரியாக்ட் எலிமென்ட்கள் என்பவை நீங்கள் திரையில் என்ன பார்க்க விரும்புகிறீர்கள் என்பதை விவரிக்கும் எளிய ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்கள். அவை இலகுவானவை மற்றும் மாற்ற முடியாதவை. அவற்றை உண்மையான DOM நோட்களுக்கான வரைபடங்களாக (blueprints) நினைத்துப் பாருங்கள்.

ரியாக்ட் காம்போனென்ட்கள்: ரியாக்ட் காம்போனென்ட்கள் மீண்டும் பயன்படுத்தக்கூடிய, தற்சார்புடைய UI அலகுகளாகும். அவை செயல்பாட்டுக் காம்போனென்ட்களாக (எளிய ஜாவாஸ்கிரிப்ட் செயல்பாடுகள்) அல்லது கிளாஸ் காம்போனென்ட்களாக (வாழ்க்கை சுழற்சி முறைகளைக் கொண்ட ஜாவாஸ்கிரிப்ட் கிளாஸ்கள்) இருக்கலாம். காம்போனென்ட்கள் ரியாக்ட் எலிமென்ட்களை ரெண்டர் செய்கின்றன, பின்னர் ரியாக்ட் அவற்றை DOM-ஐப் புதுப்பிக்கப் பயன்படுத்துகிறது.

cloneElement ரியாக்ட் எலிமென்ட்களில் செயல்படுகிறது, இந்த வரைபடங்களை அவை ரெண்டர் செய்யப்படுவதற்கு முன்பு மாற்றியமைக்க உங்களை அனுமதிக்கிறது.

React.cloneElement என்றால் என்ன?

React.cloneElement(element, props, ...children) நீங்கள் வழங்கும் element-ஐ அடிப்படையாகக் கொண்டு ஒரு புதிய ரியாக்ட் எலிமென்ட்டை உருவாக்கித் தரும். இது அடிப்படையில் அசல் எலிமென்ட்டை நகலெடுக்கிறது, ஆனால் நீங்கள் அதன் ப்ராப்ஸை மேலெழுதலாம் மற்றும் புதிய சில்ட்ரெனைச் சேர்க்கலாம். நினைவில் கொள்ள வேண்டிய முக்கிய விஷயங்கள்:

• இது அசல் எலிமென்ட்டை மாற்றுவதில்லை.
• இது ஒரு புதிய ரியாக்ட் எலிமென்ட்டைத் திருப்பித் தரும்.
• இது புதிய ப்ராப்ஸை அசல் எலிமென்ட்டின் ப்ராப்ஸுடன் இணைக்கிறது. முரண்பாடுகள் இருந்தால், புதிய ப்ராப்ஸிற்கு முன்னுரிமை அளிக்கப்படும்.
• நீங்கள் குளோன் செய்யப்பட்ட எலிமென்ட்டிற்கு புதிய சில்ட்ரெனை சேர்க்கலாம்.

சிண்டாக்ஸ் பிரிப்பு:

சிண்டாக்ஸை பிரித்துப் பார்ப்போம்:

React.cloneElement(element, props, ...children)

• element: நீங்கள் குளோன் செய்ய விரும்பும் ரியாக்ட் எலிமென்ட்.
• props: நீங்கள் சேர்க்க அல்லது மேலெழுத விரும்பும் புதிய ப்ராப்ஸைக் கொண்ட ஒரு ஆப்ஜெக்ட்.
• ...children: குளோன் செய்யப்பட்ட எலிமென்ட்டிற்கு சேர்க்க விருப்பப்பட்டால் சேர்க்கப்படும் சில்ட்ரென். நீங்கள் அவற்றை `props.children`-ல் வெளிப்படையாகச் சேர்க்காத வரை, ஏற்கனவே உள்ள எந்த சில்ட்ரெனையும் இவை மாற்றியமைக்கும்.

React.cloneElement-ன் பயன்பாட்டு வழக்குகள்

cloneElement பின்வரும் சூழ்நிலைகளில் மிகவும் பயனுள்ளதாக இருக்கும்:

1. சில்ட்ரென் காம்போனென்ட்களின் ப்ராப்ஸை மாற்றுதல்: உங்களிடம் மீண்டும் பயன்படுத்தக்கூடிய பட்டன் காம்போனென்ட் இருப்பதாக கற்பனை செய்து கொள்ளுங்கள், மேலும் சூழலைப் பொறுத்து அதன் `onClick` ஹேண்ட்லர் அல்லது ஸ்டைலை மாறும் வகையில் மாற்ற விரும்புகிறீர்கள்.
2. இருக்கும் காம்போனென்ட்களைச் சுற்றி ராப்பர்களை (wrappers) சேர்ப்பது: கூடுதல் செயல்பாடு அல்லது ஸ்டைலிங்கை வழங்கும் ஒரு உயர்-வரிசை காம்போனென்ட் (HOC) மூலம் ஒரு காம்போனென்ட்டை நீங்கள் ராப் செய்ய விரும்பலாம்.
3. டைனமிக் லேஅவுட்களை உருவாக்குதல்: திரை அளவு அல்லது பிற காரணிகளின் அடிப்படையில் காம்போனென்ட்களின் லேஅவுட் அல்லது ஸ்டைலிங்கை சரிசெய்ய cloneElement-ஐப் பயன்படுத்தலாம்.
4. ப்ராப் டிரில்லிங்கிற்கு மாற்று (கவனத்துடன்): சில சூழ்நிலைகளில் அதிகப்படியான ப்ராப் டிரில்லிங்கைத் தவிர்க்க இதைப் பயன்படுத்தலாம். இருப்பினும், அதிகப்படியான பயன்பாடு குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் கடினமாக்கும்.

cloneElement-ன் நடைமுறை எடுத்துக்காட்டுகள்

cloneElement-ஐ எவ்வாறு திறம்படப் பயன்படுத்தலாம் என்பதை விளக்க சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: பட்டன் ப்ராப்ஸை மாற்றுதல்

ஒரு எளிய பட்டன் காம்போனென்ட்டைக் கவனியுங்கள்:

function MyButton(props) {
  return {props.children};
}

இப்போது, இந்த பட்டனின் மாற்றியமைக்கப்பட்ட பதிப்பை வேறு `onClick` ஹேண்ட்லர் மற்றும் சில கூடுதல் ஸ்டைலிங்குடன் உருவாக்க விரும்புகிறோம் என்று வைத்துக்கொள்வோம்:

import React from 'react';

function MyButton(props) {
  return {props.children};
}

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  const buttonStyle = {
    backgroundColor: 'lightblue',
    padding: '10px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    

       console.log('Original button clicked')}>Original Button
      {React.cloneElement(
        Cloned Button,
        {
          onClick: handleClick,
          style: buttonStyle
        }
      )}
    
  );
}

export default App;

இந்த எடுத்துக்காட்டில், cloneElement குறிப்பிட்ட `onClick` ஹேண்ட்லர் மற்றும் `style`-உடன் ஒரு புதிய பட்டன் எலிமென்ட்டை உருவாக்குகிறது, இது அசல் பட்டனின் பண்புகளை திறம்பட மேலெழுதுகிறது. குளோன் செய்யப்பட்ட பட்டன் வெளிர் நீல பின்னணி, வளைந்த மூலைகள் மற்றும் வேறுபட்ட கிளிக் நடத்தைடன் காண்பிக்கப்படும்.

எடுத்துக்காட்டு 2: ஒரு ராப்பர் காம்போனென்ட்டைச் சேர்த்தல்

உங்களிடம் ஒரு காம்போனென்ட் உள்ளது, அதை நீங்கள் சில பேடிங்கைச் சேர்க்கும் ஒரு div உடன் ராப் செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்:

function MyComponent() {
  return 
This is my component.
;
}

ராப்பரைச் சேர்க்க நீங்கள் cloneElement-ஐப் பயன்படுத்தலாம்:

import React from 'react';

function MyComponent() {
  return 
This is my component.
;
}

function App() {
  const wrapperStyle = {
    padding: '20px',
    border: '1px solid black'
  };

  return (
    

      {React.cloneElement(
        ,
        {
          style: wrapperStyle,
          children: (
            

              
            
          )
        }
      )}
    
  );
}

export default App;

குறிப்பு: இந்த எடுத்துக்காட்டு செயல்பாட்டைக் காட்டுகிறது, ஆனால் இது ஒரு ராப்பரைச் சேர்ப்பதற்கான சிறந்த வழி அல்ல. பெரும்பாலான சூழ்நிலைகளில் ஒரு பிரத்யேக ராப்பர் காம்போனென்ட்டை உருவாக்குவது ஒரு சிறந்த நடைமுறையாகும்.

எடுத்துக்காட்டு 3: நிபந்தனைக்குட்பட்ட ப்ராப் மாற்றம்

cloneElement-ஐப் பயன்படுத்தி நிபந்தனைக்குட்பட்டு ப்ராப்ஸை மாற்றுவது எப்படி என்பதற்கான ஒரு எடுத்துக்காட்டு இங்கே. ஒரு குறிப்பிட்ட நிபந்தனையின் அடிப்படையில் ஒரு பட்டனை முடக்க விரும்பும் ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள்.

import React, { useState } from 'react';

function MyButton(props) {
  return {props.children};
}

function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  const toggleDisabled = () => {
    setIsDisabled(!isDisabled);
  };

  return (
    

       alert('Clicked!')} disabled={isDisabled}>Click Me
      Toggle Disabled
    
  );
}

export default App;

எடுத்துக்காட்டு 4: சில்ட்ரெனுடன் வேலை செய்தல்

ஒரு காம்போனென்ட்டின் சில்ட்ரெனுடன் கையாளும்போது cloneElement சக்தி வாய்ந்தது. உங்களிடம் ஒரு காம்போனென்ட் உள்ளது, அது பொருட்களின் பட்டியலை ரெண்டர் செய்கிறது, மேலும் நீங்கள் ஒவ்வொரு பொருளுக்கும் ஒரு குறிப்பிட்ட ப்ராப்பைச் சேர்க்க விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்.

import React from 'react';

function ListItem(props) {
  return 
{props.children}
;
}

function MyList(props) {
  return (
    

      {React.Children.map(props.children, child => {
        return React.cloneElement(child, {
          style: { color: 'blue' }
        });
      })}
    
  );
}

function App() {
  return (
    
      Item 1
      Item 2
      Item 3
    
  );
}

export default App;

இந்த எடுத்துக்காட்டில், React.Children.map ஆனது MyList காம்போனென்ட்டின் சில்ட்ரென் மீது சுழல்கிறது. ஒவ்வொரு சில்ட்ரெனுக்கும் (இது ஒரு ListItem), `style` ப்ராப்பைச் சேர்க்க cloneElement பயன்படுத்தப்படுகிறது, இது டெக்ஸ்ட் நிறத்தை நீலமாக அமைக்கிறது. இது ஒரு காம்போனென்ட்டின் அனைத்து சில்ட்ரெனுக்கும் எளிதாக ஸ்டைலிங் அல்லது பிற மாற்றங்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது.

cloneElement-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

cloneElement ஒரு மதிப்புமிக்க கருவியாக இருந்தாலும், உங்கள் குறியீட்டை மிகவும் சிக்கலாக்குவதைத் தவிர்க்க அதை புத்திசாலித்தனமாகப் பயன்படுத்துவது முக்கியம். மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• அரிதாகப் பயன்படுத்துங்கள்: cloneElement-ன் அதிகப்படியான பயன்பாடு படிக்கவும் புரிந்துகொள்ளவும் கடினமான குறியீட்டிற்கு வழிவகுக்கும். ப்ராப் டிரில்லிங் அல்லது கான்டெக்ஸ்ட் போன்ற மாற்று அணுகுமுறைகள் மிகவும் பொருத்தமானதாக இருந்தால் அவற்றைக் கருத்தில் கொள்ளுங்கள்.
• எளிமையாக வைத்திருங்கள்: உங்கள் cloneElement அழைப்புகளுக்குள் சிக்கலான தர்க்கத்தைத் தவிர்க்கவும். நீங்கள் சிக்கலான கையாளுதல்களைச் செய்ய வேண்டுமானால், ஒரு பிரத்யேக காம்போனென்ட் அல்லது ஹெல்பர் செயல்பாட்டை உருவாக்குவதைக் கருத்தில் கொள்ளுங்கள்.
• கீ-களைப் (keys) பயன்படுத்துங்கள்: ஒரு லூப் அல்லது மேப் செயல்பாட்டிற்குள் எலிமென்ட்களை குளோன் செய்யும்போது, ஒவ்வொரு குளோன் செய்யப்பட்ட எலிமென்ட்டிற்கும் ஒரு தனித்துவமான `key` ப்ராப்பை வழங்குவதை உறுதிப்படுத்திக் கொள்ளுங்கள். இது ரியாக்ட் DOM-ஐ திறமையாகப் புதுப்பிக்க உதவுகிறது.
• உங்கள் குறியீட்டை ஆவணப்படுத்துங்கள்: உங்கள் குறியீட்டில் cloneElement-ன் நோக்கம் மற்றும் பயன்பாட்டைத் தெளிவாக ஆவணப்படுத்துங்கள், இது மற்றவர்களுக்கு (மற்றும் உங்களுக்கும்) புரிந்துகொள்வதை எளிதாக்கும்.
• மாற்று வழிகளைக் கருத்தில் கொள்ளுங்கள்: சில சமயங்களில், ரெண்டர் ப்ராப்ஸ் அல்லது உயர்-வரிசை காம்போனென்ட்களைப் பயன்படுத்துவது cloneElement-ஐ விரிவாகப் பயன்படுத்துவதை விட சுத்தமான மற்றும் பராமரிக்கக்கூடிய தீர்வை வழங்கக்கூடும்.

cloneElement-க்கான மாற்று வழிகள்

cloneElement நெகிழ்வுத்தன்மையை வழங்கினாலும், மற்ற பேட்டர்ன்கள் சிறந்த பராமரிப்பு மற்றும் வாசிப்புத்திறனுடன் இதே போன்ற முடிவுகளை அடைய முடியும்:

• ரெண்டர் ப்ராப்ஸ் (Render Props): இந்த பேட்டர்ன் ஒரு செயல்பாட்டை ஒரு ப்ராப்பாக அனுப்புவதை உள்ளடக்கியது, அதை ஒரு காம்போனென்ட் ரெண்டர் செய்யப் பயன்படுத்துகிறது. இது பெற்றோர் காம்போனென்ட் குழந்தை காம்போனென்டின் ரெண்டரிங்கைக் கட்டுப்படுத்த அனுமதிக்கிறது.
• உயர்-வரிசை காம்போனென்ட்கள் (HOCs): ஒரு HOC என்பது ஒரு காம்போனென்ட்டை எடுத்து ஒரு புதிய, மேம்படுத்தப்பட்ட காம்போனென்ட்டைத் தரும் ஒரு செயல்பாடு ஆகும். இது அங்கீகாரம் அல்லது லாக்கிங் போன்ற குறுக்கு வெட்டு கவலைகளைச் சேர்ப்பதற்கு பயனுள்ளதாக இருக்கும்.
• கான்டெக்ஸ்ட் API (Context API): ரியாக்ட்டின் கான்டெக்ஸ்ட் API, மரத்தின் ஒவ்வொரு மட்டத்திலும் ஒரு ப்ராப்பை வெளிப்படையாக அனுப்பாமல், தீம் அல்லது பயனர் அங்கீகார விவரங்கள் போன்ற மதிப்புகளை காம்போனென்ட்களுக்கு இடையில் பகிர்ந்து கொள்ள ஒரு வழியை வழங்குகிறது.

பொதுவான சிக்கல்களும் அவற்றைத் தவிர்ப்பதற்கான வழிகளும்

cloneElement-ஐ திறம்படப் பயன்படுத்த சில பொதுவான சிக்கல்களைப் புரிந்துகொள்வது அவசியம்:

• சில்ட்ரெனை அனுப்ப மறப்பது: ஒரு எலிமென்ட்டை குளோன் செய்யும்போது, அதன் சில்ட்ரெனை சரியாகக் கையாள நினைவில் கொள்ளுங்கள். நீங்கள் அசல் சில்ட்ரெனை வெளிப்படையாக அனுப்பவில்லை அல்லது புதியவற்றை வழங்கவில்லை என்றால், அவை இழக்கப்படும்.
• ப்ராப் முரண்பாடுகள்: cloneElement-க்கு அனுப்பப்பட்ட புதிய ப்ராப்ஸ் அசல் ப்ராப்ஸுடன் முரண்படும்போது, புதிய ப்ராப்ஸ் எப்போதும் அசலை மேலெழுதும். எதிர்பாராத முடிவுகளைத் தவிர்க்க இந்த நடத்தையைக் கவனத்தில் கொள்ளுங்கள்.
• செயல்திறன் சிக்கல்கள்: cloneElement-ஐ அதிகமாகப் பயன்படுத்துவது, குறிப்பாக அடிக்கடி புதுப்பிக்கப்படும் காம்போனென்ட்களில், செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். செயல்திறன் தடைகளை அடையாளம் கண்டு சரிசெய்ய உங்கள் பயன்பாட்டை சுயவிவரம் (profile) செய்யுங்கள்.

cloneElement மற்றும் சர்வர்-சைடு ரெண்டரிங் (SSR)

cloneElement சர்வர்-சைடு ரெண்டரிங்குடன் (SSR) தடையின்றி செயல்படுகிறது. ஏனெனில் ரியாக்ட் எலிமென்ட்கள் வெறும் ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்கள் என்பதால், அவற்றை எளிதாக வரிசைப்படுத்தி சர்வரில் ரெண்டர் செய்ய முடியும்.

சர்வதேசமயமாக்கல் பரிசீலனைகள்

சர்வதேசமயமாக்கப்பட்ட பயன்பாடுகளுடன் பணிபுரியும் போது, cloneElement டெக்ஸ்ட் மற்றும் பிற லோகேல்-சார்ந்த பண்புகளை எவ்வாறு பாதிக்கக்கூடும் என்பதைக் கவனியுங்கள். தற்போதைய லோகேலைப் பொறுத்து நீங்கள் ப்ராப்ஸை சரிசெய்ய வேண்டியிருக்கலாம். எடுத்துக்காட்டாக, பயனரின் மொழியைப் பொறுத்து அணுகல்தன்மைக்காக `aria-label` பண்புக்கூற்றை மாறும் வகையில் அமைக்கலாம்.

அணுகல்தன்மை பரிசீலனைகள்

cloneElement-ஐப் பயன்படுத்தி எலிமென்ட்களை மாற்றும்போது, நீங்கள் தற்செயலாக அணுகல்தன்மையை உடைக்கவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். புதிய எலிமென்ட்கள் சரியான ARIA பண்புக்கூறுகள் மற்றும் செமாண்டிக் HTML-ஐப் பராமரிக்கின்றனவா என்பதைச் சரிபார்க்கவும். எடுத்துக்காட்டாக, நீங்கள் மாறும் வகையில் ஒரு பட்டனைச் சேர்த்தால், அது ஸ்கிரீன் ரீடர்களுக்கு பொருத்தமான `aria-label` அல்லது `aria-describedby` பண்புக்கூறுகளைக் கொண்டிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

முடிவுரை

React.cloneElement ரியாக்ட் எலிமென்ட்களைக் கையாளுவதற்கும், டைனமிக் UI-களை உருவாக்குவதற்கும் ஒரு சக்திவாய்ந்த கருவியாகும். அதன் திறன்கள் மற்றும் வரம்புகளைப் புரிந்துகொள்வதன் மூலம், நீங்கள் அதை மேலும் நெகிழ்வான, மீண்டும் பயன்படுத்தக்கூடிய மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுதப் பயன்படுத்தலாம். அதை புத்திசாலித்தனமாகப் பயன்படுத்தவும், மாற்று பேட்டர்ன்களைக் கருத்தில் கொள்ளவும், எப்போதும் குறியீட்டின் தெளிவு மற்றும் செயல்திறனுக்கு முன்னுரிமை அளிக்கவும் நினைவில் கொள்ளுங்கள்.

cloneElement-ல் தேர்ச்சி பெறுவதன் மூலம், உங்கள் ரியாக்ட் பயன்பாடுகளின் மீது ஒரு புதிய அளவிலான கட்டுப்பாட்டைத் திறக்கலாம் மற்றும் உண்மையான டைனமிக் மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கலாம்.