React ve React Native
Merhaba arkadaşlar Öncelikle iyi günler;
Sorum şu
React ile geliştirdiğim projemde farklı dosyalarda anasayfamdaki state'e erişmek düzenlemek değerini almak istiyorum. nerdeyse heryere baktım. fakat bir şeyler bulamadım. son çare olarak size yazıyorum.
Fatklı bir state mantığımı var. aralarında iletişim kurmanın farklı bir yolu mu var bu konuda yardımcı olursanız sevinirim. Göstermemi istediğiniz kod blogu varsa yazabilirsiniz :)
İyi günler iyi çalışmalar.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
şöyle bir şey yapabilirsin.
ilk olarak src/
klasörünün içinde mainContext.js
adıyla dosya oluşturup içine şunu yaz
import React, {useState, createContext, useContext} from 'react'
const MainContext = createContext()
const MainContextProvider = ({ children }) => {
const [methods, setMethods] = useState({})
const data = {
methods,
...methods,
setMethods
}
return (
<MainContext.Provider value={data}>
{children}
</MainContext.Provider>
)
}
export {
MainContextProvider,
MainContext,
useContext
}
Daha sonra App.js
de şu şekilde kullan
// src/App.js
import {MainContextProvider} from 'mainContext'
import Header from 'components/Header'
import Footer from 'components/Footer'
function App() {
return (
<MainContextProvider>
<Header />
<Footer />
</MainContextProvider>
)
}
export default App
Şimdi diyelim ki Header
componentinde bir state oluşturacaksın ve footer'da bunu update etmek istiyorsun.
O zaman Header
componentin şöyle olmalı
// components/Header.js
import {useEffect, useState} from 'react'
import {MainContext, useContext} from '../mainContext'
function Header() {
const [logo, setLogo] = useState('erbilen.net')
// header componentinden contexte değer ekle
const {methods, setMethods} = useContext(MainContext)
useEffect(() => {
setMethods({
...methods,
logo,
setLogo
})
}, [])
return (
<div>
<h1>{logo}</h1>
</div>
)
}
export default Header
Footer
componentinde şöyle olacak
// components/Footer.js
import {MainContext, useContext} from '../mainContext'
function Footer() {
// footer componentinden headerda oluşturduğumuz `logo` stateini güncelliyoruz
const {setLogo} = useContext(MainContext)
const changeLogo = () => {
setLogo('prototurk.com')
}
return (
<div>
<button onClick={changeLogo}>Logoyu değiştir</button>
</div>
)
}
export default Footer
en basit haliyle böyle componentlere prop geçmeden native context yapısını kullanabilirsin react'in.
kodlar: https://stackblitz.com/edit/react-scu6sr
demo: https://react-scu6sr.stackblitz.io
eğer her taraftan kullanılabilen state'lerden bahsediyorsanız react redux tam aradığınız şey görecektir. Component bazlı state oluşturmak yerine global statelar oluşturuyorsunuz ve bunu her yerde kullanabiliyorsunuz. Bu sayede statei child componentlere geçirmene gerek kalmıyor. Örnek olarak bir counterımız olsun. Biz bunu hem header hem de footer componentinde gösterelim. Normal şartlarda bu ikisini kapsayan bir componentte stateimizi tanımlamamız gerekir ki iki component de bu state'e erişsin. Ancak redux ile bir tane counter oluşturuyoruz ve iki komponent içinden ayrı ayrı erişiyoruz buna.
Reacte Tayfun Hocam Context Kullaniyordu Onun Videolarini izleyerek bir seyler yapabilirsiniz