Վիճակի բարձրացում React-ում

Հաճախ մի քանի կոմպոնենտներ պետք է արտացոլեն նույն փոփոխվող տվյալները: React-ում խորհուրդ է տրվում ընդհանուր վիճակը բարձրացնել մինչև ամենամոտ ընդհանուր նախնին: Եկեք նայենք օրինակով:

Ենթադրենք, մենք ուզում ենք ստեղծել ջրի ջերմաստիճանի հաշվիչ: Այն կներկայացնի դաշտ, որտեղ օգտատերը կմուտքագրի ջերմաստիճանը, և պարբերություն, որտեղ կցուցադրվի եզրակացությունը. ջուրը հեղուկ է, ջուրը պինդ է, ջուրը գազային է:

Ենթադրենք, մեր հաշվիչը ներկայացնում է կոնտեյներ կոմպոնենտ Calculator:

jsxfunction Calculator() {
  return <div>
    
  </div>;
}

Եկեք դուրս բերենք ջերմաստիճանը մուտքագրելու դաշտը դեպի կոմպոնենտ TempInp, իսկ եզրակացությամբ պարբերությունը` դեպի կոմպոնենտ Verdict:

jsxfunction Calculator() {
  return <div>
    <Verdict />
    <TempInp />
  </div>;
}

Հեշտ է հասկանալ, որ և՛ TempInp-ը, և՛ Verdict-ը պետք է ունենան ջերմաստիճանի վիճակ: Այս դեպքում տրամաբանական է, որ դա պետք է լինի նույն ջերմաստիճանը. Դաշտում տվյալների մուտքագրման ընթացքում պետք է ցուցադրվի եզրակացությունը:

Նման դեպքում խորհուրդ է տրվում օգտագործել այնպիսի հնարք, որը կոչվում է վիճակի բարձրացում. մի քանի (կամ ավելի) կոմպոնենտների համար ընդհանուր վիճակը բարձրացվում է վերև՝ մինչև նրանց ընդհանուր ծնողը:

Մեր դեպքում կստացվի, որ ջերմաստիճանի վիճակը պետք է պատկանի Calculator կոմպոնենտին, որը կփոխանցի այն TempInp-ին և Verdict-ին որպես պրոփսներ:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} />
  </div>;
}

TempInp կոմպոնենտում պետք է լինի դաշտ ջերմաստիճանը փոխելու համար: Սակայն, քանի որ այս ջերմաստիճանը այս կոմպոնենտի պրոփս է, ապա ուղղակիորեն TempInp-ում այն փոխել հնարավոր չէ: Ճիշտ կլինի Calculator կոմպոնենտից փոխանցել ջերմաստիճանը փոխելու հատուկ ֆունկցիա.

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

Ի դեպ, կարելի է նոր ֆունկցիա չներմուծել, այլ դուստր կոմպոնենտին փոխանցել setTemp ֆունկցիան.

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} setTemp={setTemp} />
  </div>;
}