v2.5.2
Giriş yap

React ve React Native

bilinmez1i
802 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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.

Cevap yaz
Cevaplar (3)
tayfunerbilen
1213 gün önce

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

fuatogur
1213 gün önce

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.

mtvartemis
1213 gün önce

Reacte Tayfun Hocam Context Kullaniyordu Onun Videolarini izleyerek bir seyler yapabilirsiniz