React'te Props ve PropTypes'ta Ustalaşma

Sahne ve PropTypes kafanızı karıştırıyor mu? Yalnız değilsin. Size aksesuarlar ve PropType'lar hakkında her konuda rehberlik edeceğim. React uygulamaları geliştirirken hayatınızı önemli ölçüde kolaylaştırabilirler. Bu eğitici, size aksesuarlar, propları geçirme ve erişme ve props kullanan herhangi bir bileşene bilgi aktarma ile ilgili ayrıntıları tanıtacaktır.

React uygulamaları oluşturmak, kullanıcı arayüzünü birkaç bileşene ayırmayı içerir; bu, verileri bir bileşenden diğerine aktarmamız gerekeceği anlamına gelir. Proplar, React bileşenleri arasında bilgi aktarmak için önemli bir mekanizmadır ve biz onları detaylı olarak inceleyeceğiz. Bileşenlerin doğru veri türünü kullanmasını ve doğru verileri iletmesini sağladığından, PropType'lara bakmadan bu makale eksik kalacaktır.

PropTypes'ı kullanarak props olarak aldığımız verileri doğrulamak her zaman iyi bir uygulamadır. Ayrıca PropType'ları React'e entegre etmeyi, PropTypes ile tip kontrolü yapmayı ve defaultProps kullanmayı öğreneceksiniz. Bu öğreticinin sonunda, props ve PropType'ları nasıl etkili bir şekilde kullanacağınızı anlayacaksınız. React'in nasıl çalıştığına dair temel bilgilere sahip olmanız önemlidir.

Props'u Anlamak

React, props (özelliklerin kısaltması) adı verilen şeyleri kullanarak bileşenlere bilgi aktarmamızı sağlar. React birkaç bileşen içerdiğinden, aksesuarlar aynı verileri onlara ihtiyaç duyan bileşenler arasında paylaşmayı mümkün kılar. Tek yönlü veri akışını kullanır (ebeveyn-çocuk bileşenleri). Bununla birlikte, bir geri arama işleviyle, bir alt öğeden bir üst bileşene sahne öğelerini geri iletmek mümkündür.

Bu veriler farklı biçimlerde olabilir: sayılar, dizgiler, diziler, işlevler, nesneler, vb. Herhangi bir HTML etiketinde nitelik bildirebileceğimiz gibi, herhangi bir bileşene props iletebiliriz. Aşağıdaki koda bir göz atın:

 <PostList posts={postsList} />

Bu snippet'te, PostList adlı bir bileşene posts adlı bir destek gönderiyoruz. Bu destek {postsList} değerine sahiptir. Verilere nasıl erişileceğini ve veri aktarılacağını çözelim.

Propları Geçmek ve Erişmek

Bu öğreticiyi ilginç kılmak için, kullanıcıların adlarının ve gönderilerinin bir listesini gösteren bir uygulama oluşturalım. Uygulama demosu aşağıda gösterilmiştir:

Uygulama, bileşen koleksiyonlarından oluşur: bir App bileşeni, bir PostList bileşeni ve bir Post bileşeni .

Gönderi listesi, content ve kullanıcının name gibi verileri gerektirecektir. Verileri şu şekilde oluşturabiliriz:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Bundan sonra, verileri çekmek için App bileşenine ihtiyacımız var, İşte o bileşenin temel yapısı:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Burada, PostList (birazdan oluşturacağımız) bir destek olarak bir dizi gönderi gönderiyoruz. Üst bileşen olan PostList , alt bileşene ( Post ) posts props olarak geçirilecek olan postsList içindeki verilere erişecektir. Hatırlarsanız, uygulamamız ilerledikçe oluşturacağımız üç bileşenden oluşuyor.

PostList oluşturalım:

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

PostList bileşeni, posts destek olarak alacaktır. Daha sonra, gönderilen her öğeyi (daha sonra modelleyeceğiz) bir Post bileşeni olarak döndürmek için posts prop, this.props.posts arasında döngü yapacaktır. Ayrıca, yukarıdaki snippet'te key kullanımına dikkat edin. React'te yeni olanlar için anahtar, listemizdeki her öğeye atanan benzersiz bir tanımlayıcıdır ve öğeleri ayırt etmemizi sağlar. Bu durumda, anahtar her gönderinin id . Aynı id sahip iki öğe olma şansı yoktur, bu nedenle bu amaç için kullanmak için iyi bir veri parçasıdır.

Bu arada, kalan özellikler Post bileşenine props olarak iletilir ( <Post {...post} /> ).

Öyleyse, Post bileşenini oluşturalım ve içindeki aksesuarlardan yararlanalım:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Post bileşenini, PostList bileşeni için yaptığımız gibi bir sınıf bileşeni olarak tanımlamak yerine, işlevsel bir bileşen olarak inşa ediyoruz. Bunu, this.props ile bir sınıf bileşeninde onlara nasıl eriştiğimize kıyasla, işlevsel bir bileşendeki aksesuarlara nasıl erişeceğinizi göstermek için yaptım . Bu işlevsel bir bileşen olduğundan, props kullanarak değerlere erişebiliriz .

Artık sahne donanımlarını nasıl geçeceğimizi ve bunlara nasıl erişeceğimizi ve ayrıca bir bileşenden diğerine nasıl bilgi aktaracağımızı öğrendik. Şimdi sahne öğelerinin işlevlerle nasıl çalıştığını düşünelim.

Props Üzerinden Fonksiyonları Geçirme

Önceki bölümde, bir veri dizisini bir bileşenden diğerine props olarak geçirdik. Peki ya bunun yerine işlevlerle çalışıyorsak? React, bileşenler arasında işlevler geçirmemizi sağlar. Bu, bir ana bileşende alt bileşeninden bir durum değişikliğini tetiklemek istediğimizde kullanışlı olur. Props değişmez olması gerekiyordu; bir pervanenin değerini değiştirmeye çalışmamalısınız. Bunu, ana bileşen olan onu ileten bileşende yapmanız gerekir.

Bir tıklama olayını dinleyen ve uygulamanın durumunu değiştiren basit bir demo uygulaması oluşturalım. Uygulamanın durumunu farklı bir bileşende değiştirmek için, işlevimizi, durumunun değişmesi gereken bileşene aktarmamız gerekir. Bu sayede alt bileşenimizde durum değiştirebilen bir fonksiyona sahip olacağız.

Kulağa biraz karmaşık mı geliyor? Bir düğmeye tıklayarak durumu değiştiren ve bir parça hoş geldiniz bilgisi veren basit bir React uygulaması oluşturdum:

Yukarıdaki demoda iki bileşenimiz var. Bunlardan biri, uygulamanın durumunu ve durumu ayarlama işlevini içeren ana bileşen olan App bileşenidir. ChildComponent , bu senaryodaki alt öğe olacaktır ve görevi, durum değiştiğinde karşılama bilgisini sunmaktır.

Bunu koda ayıralım:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Durumumuzu true olarak ayarladığımıza ve durumu değiştirme yönteminin App bileşeninde oluşturulduğuna dikkat edin. render() işlevinde, uygulamanın durumunu, prop isShow olarak ChildComponent bileşenine iletiriz. Ayrıca toggleShow() işlevini clickMe adlı bir destek olarak iletiyoruz.

Bunu, şuna benzeyen ChildComponent kullanacağız:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

Yukarıdaki en önemli şey, App bileşeninin bir işlevi ChildComponent destek olarak aktarmasıdır. clickMe() işlevi ChildComponent öğesindeki tıklama işleyicisi için kullanılırken ChildComponent ChildComponent mantığını bilmez - yalnızca düğme tıklandığında işlevi tetikler. Durum, fonksiyon çağrıldığında değiştirilir ve durum değiştiğinde, durum tekrar bir prop olarak aktarılır. Bizim durumumuzdaki çocuk gibi etkilenen tüm bileşenler yeniden oluşturulacaktır.

Uygulamanın durumunu, isShow bir destek olarak ChildComponent , çünkü onsuz, durum güncellendiğinde greeting görüntülemek için yukarıdaki mantığı yazamayız.

Şimdi fonksiyonlara baktık, şimdi doğrulamaya dönelim. PropTypes kullanarak props aracılığıyla aldığımız verileri doğrulamak her zaman iyi bir uygulamadır. Şimdi buna dalalım.

Tepkideki PropType'lar Nelerdir?

PropType'lar, bileşenlerin doğru veri tipini kullanmasını ve doğru verileri iletmesini ve bileşenlerin doğru tipte propları kullanmasını ve alıcı bileşenlerin doğru tipte propları almasını sağlayan bir mekanizmadır.

Bunu bir evcil hayvan mağazasına teslim edilen bir köpek yavrusu gibi düşünebiliriz. Evcil hayvan dükkanı domuz, aslan, kurbağa veya kertenkele istemiyor - köpek yavrusu istiyor. PropType'lar, evcil hayvan mağazasına başka bir tür hayvanın değil, doğru veri türünün (yavru köpek) teslim edilmesini sağlar.

Yukarıdaki bölümde, props kullanarak herhangi bir bileşene nasıl bilgi aktarılacağını gördük. Props'u doğrudan bileşene bir öznitelik olarak geçirdik ve ayrıca bileşenin dışından props geçtik ve onları o bileşende kullandık. Ancak, aksesuarlar aracılığıyla bileşenimizde ne tür değerler elde ettiğimizi veya her şeyin hala çalıştığını kontrol etmedik.

Bir bileşende aldığımız verileri sahne araçları aracılığıyla doğrulayıp doğrulamamak tamamen bize bağlı. Ancak karmaşık bir uygulamada, bu verileri doğrulamak her zaman iyi bir uygulamadır.

PropType'ları Kullanma

PropType'lardan faydalanmak için, komut satırında aşağıdaki kodu çalıştırarak paketi npm veya Yarn üzerinden uygulamamıza bağımlılık olarak eklememiz gerekiyor. npm için:

 npm install --save prop-types

Ve İplik için:

 yarn add prop-types

PropType'ları kullanmak için öncelikle prop-types paketinden PropType'ları içe aktarmamız gerekir:

 import PropTypes from 'prop-types';

Kullanıcıların gönderilerini listeleyen uygulamamızda ProType'ları kullanalım. Post bileşeni için nasıl kullanacağımız aşağıda açıklanmıştır:

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Burada PropTypes.string ve PropTypes.number , alınan propların doğru tipte olduğundan emin olmak için kullanılabilen prop doğrulayıcılardır. Yukarıdaki kodda, id bir sayı olduğunu, content ve user ise string olduğunu bildiriyoruz.

Ayrıca, PropType'lar hataları yakalamada faydalıdır. Ve isRequired kullanarak geçiş sahnelerini zorlayabiliriz:

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropType'ların çok sayıda doğrulayıcısı vardır. İşte en yaygın olanlardan bazıları:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

React'in belgelerinde kontrol edebileceğiniz daha fazla tür mevcuttur].

Varsayılan Sahne

Props kullanarak bazı varsayılan bilgileri bileşenlerimize iletmek istiyorsak, React bunu defaultProps adlı bir şeyle yapmamızı sağlar. PropType'ların isteğe bağlı olduğu durumlarda (yani isRequired ), defaultProps ayarlayabiliriz. Varsayılan aksesuarlar, hiçbir şeyin geçmemesi durumunda sahne öğelerinin bir değeri olmasını sağlar. İşte bir örnek:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Burada, ana bileşen tarafından belirtilmemesi durumunda this.props.name öğesinin bir değeri olduğundan emin olmak için defaultProps kullanılacaktır. Profile sınıfına herhangi bir ad aktarılmazsa, geri dönmek için varsayılan Stranger özelliğine sahip olacaktır. Bu, hiçbir prop geçirilmediğinde herhangi bir hatayı önler. Her isteğe bağlı PropType için her zaman defaultProps kullanmanızı tavsiye ederim.

Çözüm

Umarım bu eğitimde çalışmaktan zevk almışsınızdır. Umarım, size props ve propType'ların React uygulamaları oluşturmak için ne kadar önemli olduğunu göstermiştir, çünkü onlar olmadan, etkileşimler gerçekleştiğinde bileşenler arasında veri iletemezdik. Bunlar, React'in etrafında tasarlandığı bileşen odaklı ve durum yönetimi mimarisinin temel bir parçasıdır.

PropType'lar, bileşenlerin doğru veri tipini kullanmasını ve doğru verileri iletmesini ve bileşenlerin doğru tipte propları kullanmasını ve alıcı bileşenlerin doğru tipte propları almasını sağlamak için bir bonustur.

Herhangi bir sorunuz varsa, bunları aşağıdaki yorumlar bölümünde bırakabilirsiniz; her birini yanıtlamaktan ve sizinle herhangi bir sorun üzerinde çalışmaktan memnuniyet duyacağım.

Referanslar

• "React'te Düşünmek", React Docs
• “Liste ve Anahtarlar”, React Docs
• “PropTypes ile Tip Kontrolü”, React Docs
• "React'teki Bileşenlere Props Nasıl Geçirilir", Robin Wieruch