React cloneElement: எலிமென்ட் மாடிஃபிகேஷன் பேட்டர்ன்களில் தேர்ச்சி பெறுதல்

ரியாக்டின் cloneElement என்பது ஏற்கனவே உள்ள ரியாக்ட் எலிமென்ட்களைக் கையாளவும் விரிவுபடுத்தவும் உதவும் ஒரு சக்திவாய்ந்த, ஆனால் பெரும்பாலும் கவனிக்கப்படாத, API ஆகும். இது ஏற்கனவே உள்ள ஒரு ரியாக்ட் எலிமென்ட்டின் அடிப்படையில் ஒரு புதிய ரியாக்ட் எலிமென்ட்டை உருவாக்க உங்களை அனுமதிக்கிறது, அதன் பண்புகள் (props) மற்றும் சில்ட்ரனைப் பெறுகிறது, ஆனால் புதியவற்றைச் சேர்க்கவோ அல்லது மேலெழுதவோ முடியும். இது டைனமிக் காம்போனென்ட் காம்போசிஷன், மேம்பட்ட ரெண்டரிங் டெக்னிக்குகள் மற்றும் காம்போனென்ட் மறுபயன்பாட்டை மேம்படுத்துவதற்கான பல வாய்ப்புகளைத் திறக்கிறது.

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

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

• ரியாக்ட் எலிமென்ட்ஸ்: இவை நீங்கள் திரையில் என்ன பார்க்க விரும்புகிறீர்கள் என்பதை விவரிக்கும் எளிய ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்கள். அவை இலகுவானவை மற்றும் மாற்ற முடியாதவை (immutable). உண்மையான DOM நோட்களை உருவாக்க ரியாக்டிற்கான ப்ளூபிரிண்ட்களாக இவற்றை நினையுங்கள்.
• ரியாக்ட் காம்போனென்ட்ஸ்: இவை ரியாக்ட் எலிமென்ட்களைத் திருப்பித் தரும் மறுபயன்பாட்டுக்குரிய குறியீட்டுத் துண்டுகள். அவை ஃபங்ஷனல் காம்போனென்ட்களாக (JSX-ஐத் தரும் ஃபங்ஷன்கள்) அல்லது கிளாஸ் காம்போனென்ட்களாக (React.Component-ஐ நீட்டிக்கும் கிளாஸ்கள்) இருக்கலாம்.

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

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

React.cloneElement() ஃபங்ஷன் ஒரு ரியாக்ட் எலிமென்ட்டை அதன் முதல் ஆர்குமென்டாக எடுத்து, அசலின் ஒரு ஷாலோ காப்பியான ஒரு புதிய ரியாக்ட் எலிமென்ட்டைத் தருகிறது. நீங்கள் பின்னர் விருப்பமாக புதிய ப்ராப்ஸ் மற்றும் சில்ட்ரனை க்ளோன் செய்யப்பட்ட எலிமென்ட்டுக்கு அனுப்பலாம், இதன் மூலம் அசல் எலிமென்ட்டின் பண்புகளை மேலெழுதவோ அல்லது விரிவுபடுத்தவோ முடியும்.

இதன் அடிப்படை சிண்டாக்ஸ் இங்கே:

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

              
                Copy
              
            
          

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

அடிப்படைப் பயன்பாடு: மாற்றியமைக்கப்பட்ட ப்ராப்ஸுடன் க்ளோனிங்

ஒரு எளிய உதாரணத்துடன் ஆரம்பிக்கலாம். உங்களிடம் ஒரு பட்டன் காம்போனென்ட் இருப்பதாக வைத்துக்கொள்வோம்:

            function MyButton(props) {
  return <button className="my-button" onClick={props.onClick}>
    {props.children}
  </button>;
}
            

              
                Copy
              
            
          

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

            import React from 'react';

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

  const clonedButton = React.cloneElement(
    <MyButton>Click Me</MyButton>,
    {
      onClick: handleClick,
      style: { backgroundColor: 'lightblue' }
    }
  );

  return (
    <div>
      {clonedButton}
    </div>
  );
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நாம் <MyButton> எலிமென்ட்டை க்ளோன் செய்து, ஒரு புதிய onClick ஹேண்ட்லர் மற்றும் ஒரு style ப்ராப்பை வழங்குகிறோம். க்ளோன் செய்யப்பட்ட பட்டன் இப்போது புதிய செயல்பாடு மற்றும் ஸ்டைலிங்கைக் கொண்டிருக்கும், அதே நேரத்தில் அசல் பட்டனின் className மற்றும் சில்ட்ரனைத் தொடர்ந்து கொண்டிருக்கும்.

cloneElement மூலம் சில்ட்ரனை மாற்றுதல்

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

ஒரு லேஅவுட் காம்போனென்ட் அதன் சில்ட்ரனை ஒரு கண்டெய்னருக்குள் ரெண்டர் செய்யும் ஒரு சூழ்நிலையை கருத்தில் கொள்ளுங்கள்:

            function Layout(props) {
  return <div className="layout">{props.children}</div>;
}
            

              
                Copy
              
            
          

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

            import React from 'react';

function App() {
  const children = React.Children.map(
    <Layout>
      <div>Child 1</div>
      <span>Child 2</span>
    </Layout>.props.children,
    child => {
      return React.cloneElement(child, {
        className: child.props.className ? child.props.className + ' special-child' : 'special-child'
      });
    }
  );

  return <Layout>{children}</Layout>;
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், <Layout> காம்போனென்ட்டின் சில்ட்ரன் மீது செயல்பட React.Children.map ஐப் பயன்படுத்துகிறோம். ஒவ்வொரு சைல்ட்டிற்கும், அதை க்ளோன் செய்து ஒரு special-child கிளாஸைச் சேர்க்கிறோம். இது <Layout> காம்போனென்ட்டை நேரடியாக மாற்றாமல், சில்ட்ரனின் தோற்றம் அல்லது நடத்தையை மாற்றியமைக்க உங்களை அனுமதிக்கிறது.

மேம்பட்ட பேட்டர்ன்கள் மற்றும் பயன்பாட்டு வழக்குகள்

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

1. சூழ்நிலை சார்ந்த ரெண்டரிங் (Contextual Rendering)

சைல்ட் காம்போனென்ட்களில் கான்டெக்ஸ்ட் மதிப்புகளைச் செலுத்த cloneElement ஐப் பயன்படுத்தலாம். ப்ராப் டிரில்லிங் (prop drilling) இல்லாமல் (காம்போனென்ட் ட்ரீயின் பல நிலைகள் வழியாக ப்ராப்ஸை அனுப்புதல்) ஆழமாக உள்ள காம்போனென்ட்களுக்கு கட்டமைப்பு அல்லது நிலைத் தகவலை வழங்க விரும்பும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

            import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton(props) {
  const theme = useContext(ThemeContext);
  return <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }} {...props} />;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton>Click Me</ThemedButton>
    </ThemeContext.Provider>
  );
}
            

              
                Copy
              
            
          

இப்போது, `ThemedButton`-க்குள் நேரடியாக கான்டெக்ஸ்டைப் பயன்படுத்துவதற்குப் பதிலாக, `ThemedButton`-ஐ க்ளோன் செய்து கான்டெக்ஸ்ட் மதிப்பை ஒரு ப்ராப்பாகச் செலுத்தும் ஒரு ஹையர்-ஆர்டர் காம்போனென்ட்டை நீங்கள் கொண்டிருக்கலாம்.

            import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton(props) {
  return <button style={{ backgroundColor: props.theme === 'dark' ? 'black' : 'white', color: props.theme === 'dark' ? 'white' : 'black' }} {...props} />;
}

function withTheme(WrappedComponent) {
  return function WithTheme(props) {
    const theme = useContext(ThemeContext);
    return React.cloneElement(WrappedComponent, { ...props, theme });
  };
}

const EnhancedThemedButton = withTheme(<ThemedButton>Click Me</ThemedButton>);

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <EnhancedThemedButton />
    </ThemeContext.Provider>
  );
}
            

              
                Copy
              
            
          

2. நிபந்தனைக்குட்பட்ட ரெண்டரிங் மற்றும் டெக்கரேஷன்

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

            import React from 'react';

function MyComponent(props) {
  return <div>{props.data}</div>;
}

function LoadingIndicator() {
  return <div>Loading...</div>;
}

function App() {
  const isLoading = true; // Simulate loading state
  const data = "Some data";

  const componentToRender = isLoading ? <LoadingIndicator /> : <MyComponent data={data} />;

  return (<div>{componentToRender}</div>);
}
            

              
                Copy
              
            
          

நீங்கள் cloneElement ஐப் பயன்படுத்தி `MyComponent`-ஐச் *சுற்றி* ஒரு லோடிங் இன்டிகேட்டரை டைனமிக்காகச் செலுத்தலாம்.

            import React from 'react';

function MyComponent(props) {
  return <div>{props.data}</div>;
}

function LoadingIndicator(props) {
  return <div>Loading... {props.children}</div>;
}

function App() {
  const isLoading = true; // Simulate loading state
  const data = "Some data";

  const componentToRender = isLoading ? React.cloneElement(<LoadingIndicator><MyComponent data={data} /></LoadingIndicator>, {}) : <MyComponent data={data} />;

  return (<div>{componentToRender}</div>);
}
            

              
                Copy
              
            
          

மாற்றாக, ஒரு தனி LoadingIndicator-ஐப் பயன்படுத்துவதற்குப் பதிலாக, cloneElement ஐப் பயன்படுத்தி நேரடியாக `MyComponent`-ஐ ஸ்டைலிங்குடன் சுற்றி வைக்கலாம்.

            import React from 'react';

function MyComponent(props) {
  return <div>{props.data}</div>;
}

function App() {
  const isLoading = true; // Simulate loading state
  const data = "Some data";

  const componentToRender = isLoading ? React.cloneElement(<MyComponent data={data} />, {style: {opacity: 0.5}}) : <MyComponent data={data} />;

  return (<div>{componentToRender}</div>);
}
            

              
                Copy
              
            
          

3. ரெண்டர் ப்ராப்ஸுடன் காம்போனென்ட் காம்போசிஷன்

நெகிழ்வான மற்றும் மறுபயன்பாட்டுக்குரிய காம்போனென்ட்களை உருவாக்க ரெண்டர் ப்ராப்ஸுடன் இணைந்து cloneElement ஐப் பயன்படுத்தலாம். ஒரு ரெண்டர் ப்ராப் என்பது ஒரு காம்போனென்ட் எதையாவது ரெண்டர் செய்யப் பயன்படுத்தும் ஒரு ஃபங்ஷன் ப்ராப் ஆகும். இது ஒரு காம்போனென்ட்டின் செயலாக்கத்தை நேரடியாக மாற்றாமல், தனிப்பயன் ரெண்டரிங் லாஜிக்கை அதனுள் செலுத்த உங்களை அனுமதிக்கிறது.

            import React from 'react';

function DataProvider(props) {
  const data = ["Item 1", "Item 2", "Item 3"]; // Simulate data fetching
  return props.render(data);
}

function App() {
  return (
    <DataProvider
      render={data => (
        <ul>
          {data.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    />
  );
}
            

              
                Copy
              
            
          

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

            import React from 'react';

function DataProvider(props) {
  const data = ["Item 1", "Item 2", "Item 3"]; // Simulate data fetching
  return props.render(data);
}

function App() {
  return (
    <DataProvider
      render={data => {
        const listItems = data.map(item => <li key={item}>{item}</li>);
        const enhancedListItems = listItems.map(item => React.cloneElement(item, { className: "special-item" }));

        return <ul>{enhancedListItems}</ul>;
      }}
    />
  );
}
            

              
                Copy
              
            
          

சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

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

நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் உலகளாவிய பயன்பாடுகள்

மேலே விவரிக்கப்பட்ட பேட்டர்ன்கள் பரந்த அளவிலான நிஜ-உலக சூழ்நிலைகள் மற்றும் உலகளாவிய பயன்பாடுகளில் பொருந்தும்:

• மின்-வணிக தளங்கள் (E-commerce Platforms): இருப்பு நிலைகள் அல்லது விளம்பர பிரச்சாரங்களின் அடிப்படையில் தயாரிப்பு பட்டியல் காம்போனென்ட்களில் தயாரிப்பு பேட்ஜ்களை (எ.கா., "விற்பனை", "புதிய வரவு") டைனமிக்காகச் சேர்ப்பது. இந்த பேட்ஜ்கள் வெவ்வேறு கலாச்சார அழகியல்களுக்கு ஏற்றவாறு மாற்றியமைக்கப்படலாம் (எ.கா., ஸ்காண்டிநேவிய சந்தைகளுக்கு மினிமலிஸ்ட் வடிவமைப்புகள், லத்தீன் அமெரிக்க சந்தைகளுக்கு துடிப்பான வண்ணங்கள்).
• சர்வதேசமயமாக்கப்பட்ட வலைத்தளங்கள்: பயனரின் இருப்பிடத்தின் அடிப்படையில் உரை காம்போனென்ட்களில் மொழி-சார்ந்த பண்புக்கூறுகளை (எ.கா., அரபு அல்லது ஹீப்ரு போன்ற வலமிருந்து இடமாக எழுதும் மொழிகளுக்கு dir="rtl") செலுத்துதல். இது உலகளாவிய பார்வையாளர்களுக்கு சரியான உரை சீரமைப்பு மற்றும் ரெண்டரிங்கை உறுதி செய்கிறது.
• அணுகல்தன்மை அம்சங்கள் (Accessibility Features): பயனர் விருப்பத்தேர்வுகள் அல்லது அணுகல்தன்மை தணிக்கைகளின் அடிப்படையில் UI காம்போனென்ட்களில் ARIA பண்புக்கூறுகளை (எ.கா., aria-label, aria-hidden) நிபந்தனையுடன் சேர்ப்பது. இது மாற்றுத்திறனாளிகளுக்கு வலைத்தளங்களை மேலும் அணுகக்கூடியதாக மாற்ற உதவுகிறது, WCAG வழிகாட்டுதல்களுடன் இணங்குகிறது.
• தரவு காட்சிப்படுத்தல் நூலகங்கள் (Data Visualization Libraries): தரவு மதிப்புகள் அல்லது பயனர் தேர்வுகளின் அடிப்படையில் விளக்கப்பட எலிமென்ட்களை (எ.கா., பார்கள், கோடுகள், லேபிள்கள்) தனிப்பயன் ஸ்டைல்கள் அல்லது ஊடாடல்களுடன் மாற்றுதல். இது வெவ்வேறு பகுப்பாய்வுத் தேவைகளைப் பூர்த்தி செய்யும் டைனமிக் மற்றும் ஊடாடும் தரவு காட்சிப்படுத்தல்களை அனுமதிக்கிறது.
• உள்ளடக்க மேலாண்மை அமைப்புகள் (CMS): உள்ளடக்க வகை அல்லது வெளியீட்டு சேனலின் அடிப்படையில் உள்ளடக்க காம்போனென்ட்களில் தனிப்பயன் மெட்டாடேட்டா அல்லது டிராக்கிங் பிக்சல்களைச் சேர்ப்பது. இது நுணுக்கமான உள்ளடக்க பகுப்பாய்வு மற்றும் தனிப்பயனாக்கப்பட்ட பயனர் அனுபவங்களை செயல்படுத்துகிறது.

முடிவுரை

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

வழங்கப்பட்ட எடுத்துக்காட்டுகளுடன் பரிசோதனை செய்து, உங்கள் சொந்த ரியாக்ட் புராஜெக்ட்களை cloneElement எவ்வாறு மேம்படுத்தலாம் என்பதை ஆராயுங்கள். மகிழ்ச்சியான கோடிங்!