REACT export hook ???

Question

Witam ponownie,

 

Pytanie brzmi - jak zrobić export hooka z FileA do FileB i vice versa by wzrost wartości w FileA obniżał wartość w FileB. I vice versa kiedy klikamy w FileB

Kod skrócony, uproszczony

FileA:

import React, {useState} from 'react'
import {valB, setValB} from './FileB'

function FileA() {

    const [valA, setValA] = useState(1)


    return (<>
            <button 
                onClick={()=> ( setValA(valA+1), setValB(valB-1)
                )}
                > {valA} </button>

    </>)
}

export default FileA

File B: to samo tylko inne nazwy, rzecz jasna

Próbowałem z różnymi opcjami export / import - ale żadna nie działa...

Answer 1

Jest parę rozwiązań. Najprostszym wydaje się zapisywanie stanu w komponencie wyżej? 

function Component() {
    const [valA, setValA] = useState(1)
    const [valB, setValB] = useState(1)

    return <div>
        <FileA value={valA} setValue={()=> ( setValA(valA+1), setValB(valB-1)} />
        <FileB value={valB} setValue={()=> ( setValB(valB+1), setValA(valA-1)} />
    </div>
}


FileA: 
function FileA({value, setValue}) {
    return <button onClick={setValue} > {value} </button>
}

Jeśli komponenty FileA i FileB są wywoływane w rożnych miejscach i nie można tego zmienić wówczas przydadzą się konteksty reactowe :) 

Comments

Generalnie znalazłem rozwiązanie - czy może dostałem - na Stack...

Ale w moim programistycznym przypadku nieco mi sprawę komplikuje...

Mam bowiem 5 plików każdy zawierający Button i swoją zmienną aktywności Active.

Button1: onClick -> ActiveBut1++ && restActiveButts--

Czego użyć - jak to podzielić i czym powiązać - by nie tylko działało (wciśnięte w jeden plik typu Class działa = 500 linii kodu LOL) - ale miało grację i programistyczny ład?!

Jeżeli widzę to tak:

App.js:


  return (
   <div className="App">
    <Title/>
    <First/>
    <Second />
    <Third/>
    <Fourth/>
    <Fifth/>    
  </div>
  );

Nth.js

const [valN, setValN ] = useState(1)
const [buttN, setButtN ] = useState(1) ---> niech to się nazywa: poziom aktywności przycisku

<bubtton onClick=() => {

  setValN(valN+1),
  setButtN(buttN+1), - wzrost poziomu aktywności dla tego przycisku
  set.Butt[!N](val - 1)  - spadek poziomu aktywności dla reszty przycisków

}  >

To  czy Twoje rozwiązanie będzie w moim wypadku dobre?

Jestem nowy w React, więc nie mam jeszcze skali porównawczej - może prócz tego mojego  500 liniowego pliku, który śmieje się mi się prosto w nos... ;-))