Funktsiya komponentiga misol bilan reaksiya

Funktsiya komponentlari rekvizitlarni qabul qilish va reaktsiya elementlarini qaytarishi mumkin bo'lgan Javascript funktsiyalariga o'xshaydi. Ular davlatga ega bo'lolmaydi, shuning uchun fuqaroligi bo'lmagan komponentlar deb ataladi.

Funktsiya komponentlari xuddi JavaScript funksiyalariga o'xshaydi. Ular props ni ham olishlari mumkin, lekin davlatga ega bo'lolmaydilar. Shuning uchun ular fuqaroligi bo'lmagan komponentlar deb ataladi. Biroq, holatga useState() deb nomlangan kanca yordamida erishish mumkin. Kancalar haqida keyinroq o'qiymiz.

React funktsiyasi komponentidan foydalanib, xuddi shu Book komponentini yarataylik.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
    return <h1>This is a book</h1>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Chiqish

Funktsiya komponentiga rekvizitlarni o'tkazish

props funktsional komponentlarga sinf komponentlari bilan bir xil uzatiladi, lekin props ga kirish uchun argument orqali props ob'ektini qabul qilishingiz va uning nomi bilan propga kirishingiz kerak. Quyidagi misolga qarang.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book(props) {
    return <div>
        <h1>This is a book with index: {props.index}</h1>
        <h2>Author: {props.author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Chiqish

Shuningdek, siz alohida rekvizitlarni ism bilan olishingiz va unga faqat ism bilan kirishingiz mumkin. Yuqoridagi misolni ham shunday yozish mumkin.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book({index, author}) {
    return <div>
        <h1>This is a book with index: {index}</h1>
        <h2>Author: {author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Agar sizning komponentingiz boshqa komponent(lar)ni o‘rab olsa, u holda bu yordamchi komponentlarbolalar deb nomlangan maxsus tayanch orqali qabul qilinishi mumkin. Siz ularga xuddi yuqoridagi misoldagi indeks va muallif kabi kirishingiz mumkin.

Funktsiya komponentida holatni ishlatish

Holat komponentdagi ma'lumotlarni saqlash uchun ishlatiladi, shuning uchun har doim holat o'zgarganda komponent qayta ko'rsatiladi.

Funktsional komponentlar sukut bo'yicha fuqaroliksiz bo'lganligi sababli, ular holatiga ega emas, lekin bunga useState(). deb nomlangan ilgak yordamida erishish mumkin.

Quyidagi misolni ko'ring, unda biz Kitob komponentini ko'rsatganmiz. Bu komponent indeksvamuallif deb nomlangan 2 ta holat oʻzgaruvchisini yaratadi, ularga “2” va “Joy”ning boshlangʻich qiymatlarini belgilaydi. ' mos ravishda va ularga nomlari bilan kiring.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
  const [index, setIndex] = useState('2');
  const [author, setAuthor] = useState('Joy');
  return <div>
    <h1>This is a book with index: {index}</h1>
    <h2>Author: {author}</h2>
  </div>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Chiqish

UseState() kancasi holat o'zgaruvchilari qiymatlarini yangilash uchun bizga qayta qo'ng'iroq qilish imkonini beradi. Yuqoridagi misolda, setIndexvasetAuthorindex uchun qayta qo‘ng‘iroq qilishdir. vamuallifmos ravishda. Qiymatlarini yangilash uchun ushbu usullarni chaqirishingiz mumkin, yangilangandan so'ng, Kitob komponenti qayta ko'rsatiladi.