სახელმწიფოების აწევა React-ში

ხშირად რამდენიმე კომპონენტმა უნდა ასახოს იგივე მცველდომილი მონაცემები. React-ში რეკომენდებულია საერთო სახელმწიფოს აწევა უახლოეს საერთო წინაპარამდე. მოდით შევხედოთ მაგალითს.

დავუშვათ, ჩვენ გვინდა გავაკეთოთ წყლის ტემპერატურის კალკულატორი. ის წარმოადგენს input ველს, რომელშიც მომხმარებელი შეიყვანს ტემპერატურას, და აბზაცს, რომელშიც გამოიტანება ვერდიქტი: წყალი თხევადია, წყალი მყარია, წყალი აირადია.

დავუშვათ, ჩვენი კალკულატორი წარმოადგენს კონტეინერ კომპონენტს Calculator:

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

გამოვყოთ ტემპერატურის შეყვანის input ველი კომპონენტში TempInp, ხოლო აბზაცი ვერდიქტით - კომპონენტში Verdict:

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

მარტივია გავიგოთ, რომ როგორც TempInp-ს, ასევე Verdict-ს უნდა ჰქონდეს სახელმწიფო ტემპერატურასთან. ამ შემთხვევაში ლოგიკურია, რომ ეს უნდა იყოს იგივე ტემპერატურა: მონაცემების input ველში შეყვანისას უნდა გამოისახოს ვერდიქტი.

ასეთ შემთხვევაში რეკომენდებულია გამოვიყენოთ ხერხი, რომელსაც ეწოდება სახელმწიფოს აწევა: სახელმწიფო, რომელიც საერთოა ორი (ან მეტი) კომპონენტისთვის, იწევა მაღლა მათ საერთო მშობელამდე.

ჩვენს შემთხვევაში გამოვა, რომ ტემპერატურის სახელმწიფო უნდა ეკუთვნოდეს კომპონენტს Calculator, რომელიც გადასცემს მას TempInp-ს და Verdict-ს როგორც props-ებს:

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

კომპონენტში TempInp უნდა იყოს input ველი ტემპერატურის შესაცვლელად. მაგრამ, რადგან ეს ტემპერატურა ამ კომპონენტის props-ია, პირდაპირ 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>;
}