Mam sytuację, w której mam komponent (powiedzmy, że zegar odmierza czas). Po uruchomieniu określonego wyzwalacza powiedz kliknięcie przycisku lub przewinięcie strony, chcę zmienić komponent opakowania <Timer/> z elementu div o identyfikatorze dummyWrapper na element div o identyfikatorze newParent. Czy jest jakiś konkretny sposób na osiągnięcie tego celu przez React?

Korzystając z portali, element jest montowany i odmontowywany, co powoduje utratę aktualnego „stanu” timera.

Używanie document.getElementById( newParent ).appendChild(TimerWrapper) wydaje się działać, ale nie jestem pewien, czy to dobre podejście.

Przykładowa struktura DOM:

<App>
<div id="newParent"/>
<Child />
</App>

const Child = () => {
return <div> <div id="dummyWrapper"> <Timer/>  </div>
}
0
abhinavm93 19 grudzień 2019, 16:00
Możesz zdefiniować jakąś zmienną w state, a następnie po kliknięciu przycisku - zmienić wartość state. A pokaż/ukryj bloki zależy od stanu (lub dodaj/usuń jakąś klasę w nadrzędnym div i w zależności od tej klasy pokaż różne bloki)
 – 
demkovych
19 grudzień 2019, 16:02

1 odpowiedź

Musisz przenieść stan z komponentu podrzędnego do nadrzędnego.

Z odpowiedzią musisz odejść od bezpośredniej manipulacji domeną przy użyciu document.getElementById, jQuery itp. Jedyne źródło prawdy dla Twojej aplikacji musi istnieć wyłącznie w reakcji.

const App = () => {
  const [timerAdded, setTimerAdded] = useState(false)
  return (
    <>
      <div id="newParent">
        {
          timerAdded && <TimerWrapper />
        }
      </div>
      <Child setTimerAdded={setTimerAdded} />
    <>
  )
}

const Child = ({setTimerAdded}) => {
  return <div> <div id="dummyWrapper" onClick={setTimerAdded}> <Timer/>  </div>
}
const Timer = () => { return <span>Tick Tock </span>}
0
Chad 19 grudzień 2019, 16:40