Learn React
Describing the UI

కంపోనెంట్‌కు Props పాస్ చేయడం

React కంపోనెంట్‌లు props ను ఒకదానితో ఒకటి కమ్యూనికేట్ చేసుకునేందుకు ఉపయోగిస్తాయి. ప్రతి పేరెంట్ కంపోనెంట్ దాని చైల్డ్ కంపోనెంట్‌లకు props ద్వారా కొంత సమాచారం పాస్ చేయవచ్చు. Props మీకు HTML ఆట్రిబ్యుట్‌లను గుర్తు చేయవచ్చు, కానీ మీరు వాటి ద్వారా ఆబ్జెక్ట్‌లు, అర్రేలు, ఫంక్షన్‌లు వంటి ఏదైనా JavaScript వేల్యూ ను పాస్ చేయవచ్చు.

You will learn

  • props ను ఎలా ఒక కంపోనెంట్‌కు పాస్ చేయాలి
  • props ను ఎలా ఒక కంపోనెంట్‌లో రీడ్ చేయాలి
  • props కోసం డిఫాల్ట్ వాల్యూస్ ఎలా స్పెసిఫై చేయాలి
  • కొంత JSX ను కంపోనెంట్‌కు ఎలా పాస్ చేయాలి
  • props ఎలా కాలక్రమంలో మారతాయి

తెలిసిన props

Props అనేవి మీరు JSX ట్యాగ్‌కు పాస్ చేసే సమాచారం. ఉదాహరణకు, className, src, alt, width, మరియు height ఇవి మీరు <img> ట్యాగ్‌కు పాస్ చేయగల props:

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

మీరు <img> ట్యాగ్‌కు పాస్ చేయగల props ముందే నిర్ణయించినవి (ReactDOM అనేది HTML స్టాండర్డ్ కి అనుగుణంగా ఉంటుంది). మీరు ఏవైనా props ను మీ స్వంత కాంపోనెంట్లకు పాస్ చేయవచ్చు, ఉదాహరణకు <Avatar>, వాటిని కస్టమైజ్ చేయడానికి, ఇలా చేయండి!

కంపోనెంట్‌కు props పాస్ చేయడం

ఈ కోడ్‌లో, Profile కంపోనెంట్ తన చైల్డ్ కంపోనెంట్ అయిన Avatar కు ఎలాంటి props ని పాస్ చేయడంలేదు:

export default function Profile() {
  return (
    <Avatar />
  );
}

మీరు Avatar కు రెండు స్టెప్స్ లో props ఇవ్వవచ్చు.

స్టెప్ 1: చైల్డ్ కంపోనెంట్‌కు props పాస్ చేయండి

మొదట, Avatar కు కొన్ని props పాస్ చేయండి. ఉదాహరణకు, రెండు props పాస్ చేద్దాం: person (ఒక ఆబ్జెక్ట్) మరియు size (ఒక నెంబర్):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Note

person= తరువాత డబుల్ కర్లీ బ్రాకెట్స్ మీకు సందేహం కలిగిస్తే, అవి JSX కర్లీస్ ఒక ఆబ్జెక్ట్ మాత్రమే అని గుర్తుంచుకోండి.

ఇప్పుడు మీరు ఈ props ను Avatar కంపోనెంట్ లో చదవచ్చు.

స్టెప్ 2: చైల్డ్ కంపోనెంట్ లో props ను రీడ్ చేయండి

మీరు ఈ props ను function Avatar తర్వాత నేరుగా ({ మరియు }) లో కమాలతో వేరు చేసిన person, size పేర్లను జాబితా చేయడం ద్వారా చదవచ్చు. ఇది మీకు Avatar కోడ్ లో వేరియబుల్ వంటి వాటిని ఉపయోగించడానికి అనుమతిస్తుంది.

function Avatar({ person, size }) {
  // person and size are available here
}

Avatar లో person మరియు size props ను ఉపయోగించి రెండరింగ్ కోసం కొంత లాజిక్ జోడించండి, అంతే మీ పని పూర్తవుతుంది.

ఇప్పుడు మీరు Avatar ను వివిధ props తో అనేక రకాలుగా రెండర్ చేయడానికి కాన్ఫిగర్ చేయవచ్చు. వాల్యూ మార్చి ప్రయత్నించండి!

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

Props మీకు పేరెంట్ మరియు చైల్డ్ కంపోనెంట్‌లను స్వతంత్రంగా ఆలోచించడానికి అనుమతిస్తాయి. ఉదాహరణకు, మీరు Profile లో person లేదా size props యొక్క వాల్యూస్ ను మార్చవచ్చు, కానీ Avatar వాటిని ఎలా ఉపయోగిస్తుంది అనే దాని గురించి ఆలోచించాల్సిన అవసరం లేదు. అదేవిధంగా, మీరు Avatar ఈ props ను ఎలా ఉపయోగిస్తుందో మార్చవచ్చు, Profile ను చూడకుండా.

మీరు props ను “knobs” లాగా అనుకోవచ్చు, వాటిని మీరు సర్దుబాటు చేయవచ్చు. ఇవి ఫంక్షన్‌లకు ఆర్గుమెంట్‌లు ఎంత ముఖ్యమో, అదే పాత్ర పోషిస్తాయి—వాస్తవానికి, props మీ కంపోనెంట్‌కు కలిగే ఏకైక ఆర్గుమెంట్! React కంపోనెంట్ ఫంక్షన్‌లు ఒకే ఆర్గుమెంట్ ను స్వీకరిస్తాయి, అంటే props ఆబ్జెక్ట్‌:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

సాధారణంగా మీకు మొత్తం props ఆబ్జెక్ట్ అవసరం ఉండదు, కాబట్టి దానిని వ్యక్తిగత props గా డీస్ట్రక్చర్ చేస్తారు.

Pitfall

props డిక్లేర్ చేస్తున్నప్పుడు ( మరియు ) లోపల { మరియు } కర్లీస్ ను మిస్ చేయకండి:

function Avatar({ person, size }) {
  // ...
}

ఈ సింటాక్స్‌ను “డీస్ట్రక్చరింగ్” అని పిలుస్తారు ఇది ఒక ఫంక్షన్ పరమేటర్ నుండి ప్రాపర్టీలు చదవడానికి సమానమైనది:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

prop డిఫాల్ట్ వాల్యూ స్పెసిఫై చేయడం

ఎటువంటి వేల్యూ ఇవ్వని సమయంలో prop కి డిఫాల్ట్ వేల్యూ ఇవ్వాలనుకుంటే, డీస్ట్రక్చరింగ్ ద్వారా ప్యారామీటర్ తర్వాత = మరియు డిఫాల్ట్ వేల్యూ ను ఉంచి అది చేయవచ్చు.

function Avatar({ person, size = 100 }) {
  // ...
}

ఇప్పుడు, ఏదైనా size prop లేకుండా <Avatar person={...} /> రెండర్ అయితే, size వాల్యూ 100 గా సెట్ అవుతుంది.

డిఫాల్ట్ వాల్యూ size prop మిస్ అయితే మాత్రమే లేదా size={undefined} పాస్ చేసినప్పుడు ఉపయోగించబడుతుంది. కానీ మీరు size={null} లేదా size={0} పాస్ చేస్తే, డిఫాల్ట్ వాల్యూ ఉపయోగించబడదు.

JSX స్ప్రెడ్ సింటాక్స్ ద్వారా props ఫార్వర్డ్ చేయడం

కొన్నిసార్లు, props పాస్ చేయడం చాలా బోర్ కొడుతుంది:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

తరుచుగా వాడే కోడ్‌లో ఎలాంటి తప్పు లేదు—అది మరింత స్పష్టంగా చదవగలిగేది కావచ్చు. కానీ కొన్నిసార్లు మీరు సంక్షిప్తతకు విలువ ఇస్తారు. కొన్ని కంపోనెంట్‌లు తమ props ను అన్ని చైల్డ్‌లకు ఫార్వర్డ్ చేస్తాయి, ఉదాహరణకు, ఈ Profile లో Avatar props పాస్ చేసిన విధానం. అవి తమ props ను నేరుగా ఉపయోగించకపోతే, మరింత కొద్దిపాటి “స్ప్రెడ్” సింటాక్స్ ఉపయోగించడం సరైనది కావచ్చు:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

ఇది Profile లోని అన్ని props లను వాటి పేర్లను లేకుండా Avatar కు ఫార్వర్డ్ చేస్తుంది.

స్ప్రెడ్ సింటాక్స్‌ను లిమిటెడ్ కా ఉపయోగించండి. మీరు దాన్ని ప్రతి ఇతర కంపోనెంట్‌లో ఉపయోగిస్తే, దాంట్లో ఏదో పొరపాటు ఉంది. ఇది తరచుగా మీ కంపోనెంట్‌లను విభజించి, చిల్డ్రన్‌ను JSX‌ గా పాస్ చేయాలని చూస్తుంది. దీని గురించి మరింత తరువాత తెలుసుకుందాం!

JSX ని చిల్డ్రన్‌గా పాస్ చేయడం

బిల్ట్-ఇన్ బ్రౌజర్ ట్యాగ్‌లను నెస్టింగ్ చేయడం సాధారణ ప్రాక్టీస్:

<div>
  <img />
</div>

కొన్నిసార్లు మీరు మీ సొంత కంపోనెంట్‌లను కూడా అదే విధంగా నెస్ట్ చేయాలని కోరుకుంటారు:

<Card>
  <Avatar />
</Card>

మీరు JSX ట్యాగ్‌లో కంటెంట్‌ను నెస్ట్ చేస్తే, పేరెంట్ కంపోనెంట్ ఆ కంటెంట్‌ను children అనే prop లో స్వీకరిస్తుంది. ఉదాహరణకు, కింద ఇచ్చిన Card కంపోనెంట్ <Avatar /> ను children prop గా స్వీకరిస్తుంది మరియు దాన్ని ఒక రేపర్‌ల div లో రెండర్ చేస్తుంది:

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

<Card> లోని <Avatar> ను కొన్ని టెక్స్ట్‌తో మార్చి ప్రయత్నించండి, అప్పుడు Card కంపోనెంట్ ఎలాంటి నెస్టెడ్ కంటెంట్‌ను అయినా ఎలా ర్యాప్ చేయగలదో మీరు గమనించవచ్చు. దాని లోపల ఏమి రెండర్ అవుతుందో “తెలుసుకోవాల్సిన” అవసరం దీనికి లేదు. మీరు చాలా చోట్ల ఈ సౌకర్యవంతమైన పాటర్న్ చూస్తారు.

children prop ఉన్న కంపోనెంట్‌ను, దాని పేరెంట్ కంపోనెంట్లు ఏదైనా JSX తో “పూరించగల” ఒక “ఖాళీ” గా భావించవచ్చు. మీరు తరచుగా విజువల్ రేపర్‌ల కోసం children prop ఉపయోగిస్తారు: ప్యానెల్‌లు, గ్రిడ్‌లు మొదలైనవి.

A puzzle-like Card tile with a slot for "children" pieces like text and Avatar

Illustrated by Rachel Lee Nabors

Props కాలక్రమేణా ఎలా మారుతాయో

కింద ఇచ్చిన Clock కంపోనెంట్ దాని పేరెంట్ కంపోనెంట్ నుండి రెండు ప్రాప్స్‌ని స్వీకరిస్తుంది: color మరియు time. (పేరెంట్ కంపోనెంట్ కోడ్‌ను మినహాయించారు, ఎందుకంటే అది state ను ఉపయోగిస్తుంది, దానిపై మనం ఇప్పుడే చర్చించటం లేదు.)

కింద ఉన్న సెలెక్ట్ బాక్స్‌లో రంగును మార్చి చూడండి:

export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}

ఈ ఉదాహరణ ఒక కంపోనెంట్ సమయం గడిచేకొద్దీ వేర్వేరు props పొందవచ్చు అని చూపిస్తుంది. Props ఎప్పుడూ స్థిరంగా ఉండవు! ఇక్కడ, time prop ప్రతి సెకనుకు మారుతుంది, మరియు color ప్రాప్ మీరు మరో రంగును ఎంచుకున్నప్పుడు మారుతుంది. Props ఒక కంపోనెంట్ యొక్క డేటాను ఎప్పుడైనా ప్రతిబింబిస్తాయి, మొదట్లో మాత్రమే కాదు.

అయితే, props ఇమ్మ్యుటబుల్—ఇది కంప్యూటర్ సైన్స్ లో “మార్చలేనిది” అనే అర్థం కలిగిన పదం. ఒక కంపోనెంట్ దాని props మార్చాల్సినప్పుడు (ఉదాహరణకు, యూజర్ చర్య లేదా కొత్త డేటాకు ప్రతిస్పందనగా), అది దాని పేరెంట్ కంపోనెంట్ వేరే props-కొత్త ఆబ్జెక్ట్‌ను పంపించమని “అడగాలి”! దాని పాత props తరువాత దూరంగా వేయబడతాయి, మరియు చివరికి JavaScript ఇంజిన్ వాటి ద్వారా తీసుకున్న మెమరీని తిరిగి స్వీకరిస్తుంది.

”Props మార్చడానికి ప్రయత్నించకండి”. మీరు యూజర్ ఇన్పుట్ (ఎంచుకున్న రంగును మార్చడం వంటి) వాటికి స్పందించాల్సినప్పుడు, మీరు “state సెట్ చేయాలి”, దానిపై మీరు state: ఒక కంపోనెంట్ యొక్క మెమరీ లో తెలుసుకోవచ్చు

Recap

  • Props పంపించడానికి, వాటిని JSX లో జోడించండి, మీరు HTML అట్రిబ్యూట్స్ తో చేసినట్లే.
  • Props ను చదవడానికి, function Avatar({ person, size }) డీస్ట్రక్చరింగ్ సింటాక్స్ ఉపయోగించండి.
  • మీరు size = 100 వంటి డిఫాల్ట్ వాల్యూ స్పెసిఫై చేయవచ్చు, ఇది props పంపించకపోయిన లేదా undefined props కోసం ఉపయోగించబడుతుంది.
  • మీరు <Avatar {...props} /> JSX స్ప్రెడ్ సింటాక్స్‌తో అన్ని props ఫార్వర్డ్ చేయవచ్చు, కానీ దీనిని ఎక్కువగా ఉపయోగించకండి!
  • <Card><Avatar /></Card> వంటి నెస్టెడ్ JSX Card కంపోనెంట్ యొక్క children prop కనిపిస్తుంది.
  • Props అనేవి అప్పటి స్థితిని చూపించే రీడ్-ఒన్లీ స్నాప్‌షాట్లు: ప్రతి రెండరింగ్ ఒక కొత్త props వెర్షన్‌ను అందిస్తుంది.
  • మీరు props మార్చలేరు. మీరు ఇంటరాక్టివిటీ అవసరమైనప్పుడు, state సెట్ చేయాల్సి ఉంటుంది.

Try out some challenges

Challenge 1 of 3:
కంపోనెంట్‌ను ఎక్స్‌ట్రాక్ట్ చేయండి

ఈ Gallery కంపోనెంట్‌లో రెండు ప్రొఫైళ్లకు సంబంధించిన చాలా సమానమైన మార్కప్ ఉంది. డుప్లికేషన్‌ను తగ్గించేందుకు దీని నుండి ఒక Profile కంపోనెంట్‌ను ఎక్స్‌ట్రాక్ట్ చేయండి. దీనికి ఏమి props పంపాలనేది మీరు నిర్ణయించుకోవాలి.

import { getImageUrl } from './utils.js';

export default function Gallery() {
  return (
    <div>
      <h1>Notable Scientists</h1>
      <section className="profile">
        <h2>Maria Skłodowska-Curie</h2>
        <img
          className="avatar"
          src={getImageUrl('szV5sdG')}
          alt="Maria Skłodowska-Curie"
          width={70}
          height={70}
        />
        <ul>
          <li>
            <b>Profession: </b> 
            physicist and chemist
          </li>
          <li>
            <b>Awards: 4 </b> 
            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
          </li>
          <li>
            <b>Discovered: </b>
            polonium (chemical element)
          </li>
        </ul>
      </section>
      <section className="profile">
        <h2>Katsuko Saruhashi</h2>
        <img
          className="avatar"
          src={getImageUrl('YfeOqp2')}
          alt="Katsuko Saruhashi"
          width={70}
          height={70}
        />
        <ul>
          <li>
            <b>Profession: </b> 
            geochemist
          </li>
          <li>
            <b>Awards: 2 </b> 
            (Miyake Prize for geochemistry, Tanaka Prize)
          </li>
          <li>
            <b>Discovered: </b>
            a method for measuring carbon dioxide in seawater
          </li>
        </ul>
      </section>
    </div>
  );
}
PreviousJavaScript in JSX with Curly Braces
NextConditional Rendering