Jak odczytać zmienną zdefiniowaną w komponencie funkcyjnym?

Hej, mam komponent funkcyjny Player i wewnatrz niego mam zmienna variable.

export function Player() {
  let variable = null; // moja zmienna, cokolwiek
  return <div>...</div>

W kodzie sobie taki komponent gdzies renderuje wolajac <Player/> ale chcialbym tez moc w jakis sposob dostac sie do zmiennej variable. Wydaje mi sie ze robi sie to jakos poprzez ref cos w stylu <Player ref={playerRef}/> ale nie moge znalezc jak to sie poprawnie nazywa i robi.

Bede wdzieczny za pomoc

Ja proponuje żebyś nauczył się JavaScriptu, potem usiadł do reacta, wtedy zrozumiesz jak to działa.

Kokos12345 napisał(a):

Hej, mam komponent funkcyjny Player i wewnatrz niego mam zmienna variable.

Kopiuj

export function Player() {
  let variable = null; // moja zmienna, cokolwiek
  return <div>...</div>

W kodzie sobie taki komponent gdzies renderuje wolajac <Player/> ale chcialbym tez moc w jakis sposob dostac sie do zmiennej variable. Wydaje mi sie ze robi sie to jakos poprzez ref cos w stylu <Player ref={playerRef}/> ale nie moge znalezc jak to sie poprawnie nazywa i robi.

W skrócie - nie da się.

Ale pewnie da się zrobić, to co chcesz zrobić - tylko że inaczej:

1. Jeśli zmienna będzie modyfikowana - przekaż ją przez propy
2. Jeśli zmienna nie będzie modyfikowana - możesz zdefiniować ją poza komponentem i po prostu się odnieść
3. Alternatywnie, możesz skorzystać z innych mechanizmów, jak np context lub redux.

ref={} tutaj nie pomoże niestety w żaden sposób.

W jakim celu chcesz się dostać?
Wyczuwam problem XY: https://xyproblem.info/
Można rozkminiać rozwiązania na szybko - propsy, refy, context, callbacki, lifting state up... ale niestety najlepsze rozwiązanie będzie zależeć od tego, co tak naprawdę chcesz zrobić.

sugeruję zapoznać się z materiałami https://react.dev/learn/managing-state

LukeJL napisał(a):

W jakim celu chcesz się dostać?
Wyczuwam problem XY: https://xyproblem.info/
Można rozkminiać rozwiązania na szybko - propsy, refy, context, callbacki, lifting state up... ale niestety najlepsze rozwiązanie będzie zależeć od tego, co tak naprawdę chcesz zrobić.

sugeruję zapoznać się z materiałami https://react.dev/learn/managing-state

Rozwiazalem problem korzystajac z hooka useImperativeHandle :)

Mimo wszystko uważam, że warto przemyśleć to w szerszej perspektywie (odnośnie tego, do czego tego faktycznie potrzebujesz), bo możliwe, że robisz coś, co działa, ale co da się zrobić w lepszy sposób.