Props haqida | Hooks qo'llanma 10

Ona componentdan bola componentga ma'lumot uzatuvchi propslar

Props bu propertiesning qisqartmasi va componentlar orasida ma'lumot almashinuvi uchun ishlatiladi. Ona componentdan bola componentlarga ma'lumot yuborish props orqali amalga oshiriladi.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/react-props-1ux0vf

Ona va bola componentlar

Ona va bola componentlar orasidagi farq nima?

Aytaylik bizda Card componenti mavjud. Cardning ichida esa bizda button bor. Button Card componentning ichida bo'lgani uchun, biz buttonni bola component, Cardni esa ona component deya nomlaymiz.

Ona component yaratish

Ishimizni Ona component ya'ni Card yaratishdan boshlaymiz

import React from "react";
import styled from "styled-components";

const MyCard = () => {
    return <Wrapper>Button aktiv bo'lishi kerak</Wrapper>;
};

export default MyCard;

const Wrapper = styled.div`
    background: #ff884b; 
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6); 
    border-radius: 30px; 
    padding: 20px; 
    max-width: 300px; 
    width: 100%; 
    display: grid; 
    gap: 30px; 
    justify-items: center; 
    align-items: center; 
    font-family: Segoe UI, sans-serif; 
    margin-left: auto; 
    margin-right: auto;
`;

Bola component yaratish

Navbat, Cardning bola componentini yaratishga keldi, button componentni. Button argument sifatida props qabul qiladi. Style berilgan buttonga isActive nomli prop berib yuboramiz va shu propga qarab uning background colorini o'zgartiramiz.

import React from "react";

const MyButton = (props) => { 
    return (
      <button style={{ 
        background: `${ 
           props.isActive 
             ? "linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%)" 
             : "grey" }`, 
        border: "none", 
        padding: "10px 15px", 
        borderRadius: "12px" 
       }} > 
         Click me! 
       </button>
     )
};

export default MyButton;

Buttonni bola component sifatida qo'shish

Biz Card fayliga kirib Button componentini yuqorida import qilib olamiz.

import MyButton from "./Button";

MyButton componentini MyCard componentining return qismida ishlatamiz. MyButtonga isActive propsni berish ham esdan chiqmasligi zarur.

const MyCard = () => {
    return (
        <Wrapper>
            Button aktiv bo'lishi kerak
            <MyButton isActive={true} /> 
            {/*isActive propsni berish esdan chiqmasin*/}
        </Wrapper>
    );
};

Endi siz isActivening valuesini o'zgartirsangiz buttonning backgroundi ham o'zgaradi.

Stylelar bilan yakuniy kod

Card componenti

import React from "react";
import styled from "styled-components";
import MyButton from "./Button";

const MyCard = () => {
    return (
        <Wrapper>
            Button aktiv bo'lishi kerak
            <MyButton isActive={true} /> 
            {/*isActive propsni berish esdan chiqmasin*/}
        </Wrapper>
    );
};

const Wrapper = styled.div`
    background: #ff884b; 
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6); 
    border-radius: 30px; 
    padding: 20px; 
    max-width: 300px; 
    width: 100%; 
    display: grid; 
    gap: 30px; 
    justify-items: center; 
    align-items: center; 
    font-family: Segoe UI, sans-serif; 
    margin-left: auto; 
    margin-right: auto;
`;

Button komponent

import React from "react";

const MyButton = (props) => { 
    return (
      <button style={{ 
        background: `${ 
           props.isActive 
             ? "linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%)" 
             : "grey" }`, 
        border: "none", 
        padding: "10px 15px", 
        borderRadius: "12px" 
       }} > 
         Click me! 
       </button>
     )
};

export default MyButton;