React , Props nedir ? Nasıl kullanılır?

Propslar, Bir componentten başka bir componente aktarılmak istenen sabit verilerilerdir. Uygulamada değişmeyecek sabit verileriniz varsa onlarda kullanmak isteyebilirsiniz. Sabit olacağı için sayfada render edilmezler.

Örneğin title ve description değişkenlerini parametre olarak test componentine geçelim

import React, { Component } from 'react';
import Test from './components/test'
import './App.css';

class App extends Component {
  render() {
    const title ="Derinkod React ";
    const description ="Derinkod react projesi";
    return (
      <div className="App">
        <Test title={title} description={description}/>
      </div>
    );
  }
}

export default App;

App componentinden gönderdiğimiz verileri test componentinden this.props.degiskenadı şeklinde aşağıdaki gibi yakalıyoruz.

import React, {Component} from 'react';

class Test extends Component {
    render() {
        return (
            <div>
                <h3>React Deneme</h3>
                <p> {this.props.title}</p>
                <p> {this.props.description}</p>
            </div>
        );
    }
}

export default Test;

bu yukarıdaki kullanım uzun yazılınca sıkıcı karışık gelebilir. Şöylede tanımlaya biliriz. Hem güzel gözüküyor.

import React, {Component} from 'react';

class Test extends Component {
    render() {
        const {title, description} = this.props;
        return (
            <div>
                <h3>React Deneme</h3>
                <p> {title}</p>
                <p> {description}</p>
            </div>
        );
    }
}

export default Test;

çıktı olarak gönderdiğimiz verileri aşağıdaki gibi görüyor olacağız.

Bir cevap yazın