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.
şö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