v2.5.2
Giriş yap

React ve React Native

bilinmez1i
786 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.

tayfunerbilen
1178 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