React 10 – Props ile Tanışalım.

Bir projemiz var diyelim. Bu projemizde de bazı standartlar yapmak istiyorsunuz. Çok basit bir örnek vermek gerekirse, kendinize ait özelleştirilmiş bir input yapmak istiyorsunuz. Boyutu, arka plan rengi, boşluklar vs.

Bunun için kendi özelleştirilmiş input componentimizi yazabiliriz.

“MyInputComponent” adında bir class component oluşturalım. Bu component içerisinde sadece bir label ve bir input barındırsın. Label bu input’un title’ı olsun.

Bu componentte aslında her şey aynı olacak. Sadece label’ın text’i değişecek. Örneğin formumuza adı ve soyadı gibi iki alan eklemek istediğimizde, ilk componentin label’ında “adı”, ikincisinde ise “soyadı” yazmalı.

Bunun için ne yapmamız gerekiyor? Oluşturduğumuz componentin içine değerleri nasıl göndeririz?

İşte bunu sağlayan yapı da props’lar. Elinizin altındaki componentlere değer göndermenize yarıyorlar.

MyInputComponent.js için kodumuz:

import React, { Component } from 'react';
import './MyInputComponent.css'

class MyInputComponent extends Component {

    render() {

        return (
            <div className="myinput">
                <label>{this.props.title}:
                    <input type="text" name="name" />
                </label>
            </div>);
    }
}

export default MyInputComponent;

Burada gördüğümüz tek yabancı kod “{this.props.title}:” kısmı. Buradaki title için dışarıdan bir değer bekliyoruz demektir bu.

Bir de .css dosyası oluşturalım.

.myinput{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: honeydew;
}

Şimdi de “MyComponent.js” adında bir class component oluşturalım. Bu componentin içinde de birden fazla MyInputComponent çağıracağız. Her biri için ise bir “title” değeri göndereceğiz.

import React, { Component } from 'react';
import MyInputComponent from './MyInputComponent'

class MyComponent extends Component {

    render() {

        return (
            <div className="mycomponent">
               <MyInputComponent title = "Name"></MyInputComponent>
               <MyInputComponent title = "Surname"></MyInputComponent>
            </div>);
    }
}

export default MyComponent;

App.js içinde MyComponent i çağırarak uygulamamızın son haline bakalım.

Görüldüğü üzere, özelleştirilmiş componentimizi birden fazla kez kullanabildik. Label’ın textini dışarıdan parametre alarak ayarladık.

Peki ya bu değer gönderilmezse? 3. bir component daha ekleyelim.

<div className="mycomponent">
	<MyInputComponent title = "Name"></MyInputComponent>
	<MyInputComponent title = "Surname"></MyInputComponent>
	<MyInputComponent ></MyInputComponent>
</div>);

O zaman istemediğimiz bir görüntü ortaya çıkacak.

Bu durumda default değerler setleyebiliriz. Hatta props ların type’ını da belirtebiliyoruz.

Bunun için class scope’unun dışına aşağıdaki gibi kodumuzu ekliyoruz.

import React, { Component } from 'react';
import './MyInputComponent.css'
import PropTypes from 'prop-types'

class MyInputComponent extends Component {

    render() {

        return (
            <div className="myinput">
                <label>{this.props.title}:
                    <input type="text" name="name" />
                </label>
            </div>);
    }
}

MyInputComponent.defaultProps = {
    title: "Title"
}

MyInputComponent.propTypes = {
    title: PropTypes.string
}

export default MyInputComponent;

Son durumda uygulamamız aşağıdaki gibi olacaktır.

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir