React ta State ve props lar uygulamalarımızda componentleri kontrol etmemizi yönetmemizi onlara özellikler katmamızı sağlar.
PROPS : Props lar bir componentten başka bir componente veri aktarımı yapmamızı sağlar. Component içerisinde herhangi bir değişime uğramazlar.
Bir örnek ile bakalım
|
1 2 3 4 5 6 7 8 9 10 11 |
function App() { return ( <div className=“container”> <Navbar title=“Props gönderiyorum.”/> </div> ); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
function Navbar(props){ return( <div> <h3>{props.title}</h3> </div> ) } export default Navbar; |
Şimdide bir class componente birden çok data gönderelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function App() { return ( <div className=“container”> <User name=“Hakan Demir” salary=“10000” departman=“IT” /> <User name=“Furkan Demir” salary=“15000” departman=“IT” /> </div> ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class User extends Component { render() { return ( <div> <ul> <li>İsim: {this.props.name}</li> <li>Departman: {this.props.departman}</li> <li>Maaş: {this.props.salary}</li> </ul> </div> ) } } export default User; |
LOOP OLAYI : Eğer çoklu bir data varsa component içinde döngü (map) ile dataları gezeriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const users = [ { id:100, name:“Faruk Demir”, username:“Bret”, company:“Romaguera” }, { id:102, name:“Fatma Demir”, username:“Klora”, company:“Rendigmen” }, { id:102, name:“Mustafa Demir”, username:“Mustapha”, company:“Capcom” } ] //App.js içindeki div içine bu şekilde yazarak Loop.js e gönderdim <Loops users={users}/> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function Loops({users}){ return( <ul> { users.map((user) => <li key = {user.id}> Name: {user.name} User Name: {user.username} – Company : {user.company}</li>) } </ul> ) } export default Loops; |
PROP TYPE OLAYI : Prop-types kütüphanesini çekerek propların tiplerini belirleyip kısıtlayabiliriz.
|
1 2 3 |
{<UserDetail name = {“Hakan Demir”} age= {33} bobbies = {[“book”,“guitar”,“coding”]} address = {{detail:“Adresim”,zipcode:8015}}/>} |
NOT: Bir değişkeni birkaç farklı tip olarakta atayabiliriz. Bunu için UserDetail.js de yazdığım UserDetail.propTypes içindeki age e oneOfType diyerek hem string hemde int olabilir
|
1 2 3 |
age: PropTypes.oneOfType([PropTypes.string,propTypes.number]), |
yani artık yaşa 30 yada “30” yazsamda hata vermez. oneOfType : Tiplerden biri demek
|
1 2 3 4 |
name: PropTypes.string.isRequired, //isRequired zorunluluk belirtir. |
Eger değerler dolu gelmezse yada varsayılan olarak istediğimiz bişey istersek defaultProps kullanılır.
|
1 2 3 4 5 6 7 |
UserDetail.defaultProps = { name: “Faruk Köse”, hobbies: [“Balıkçılık” , “Olta Tamiri”] } |
STATE : State bir componentin o anki durumunu gösteren ve değişik propertilerden oluşan bir js objesidir. Yani o compoente tıklanmış mı herhangi bir aksiyon alınmış mı gibi durumları gösterir. Ve sadece state ti değişen component render edilir.
Örn: Componente bir state göndererek durumu kontrol edelim.
Görüldüğü gibi isVisible true yada false olma durumuna göre veriyi çağırdık.
Başka bir örnek.
Örn: Eğer inputlardan girilen değerleri alıp göndereceksek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function StateInput(){ const [user,setUser] = useState({name:“Mesut”,surname:“Yiğit”,age:30}); const onChangeValue = (e) => { setUser({...user,[e.target.name]: e.target.value}); }; return( <div> <h1>State Input</h1> <br /> <div> {user.name} {user.surname} ({user.age}) </div> <br /> <div> <input name=“name” type=“text” placeholder=“Name” value={user.name} onChange = {onChangeValue}/> <input name=“surname” type=“text” placeholder=“Surname” value={user.surname} onChange = {onChangeValue}/> <input name=“age” type=“number” placeholder=“Age” value={user.age} onChange = {onChangeValue}/> </div> </div> ); } |
sağlıcakla kalın….
Bir yanıt yazın