在 React.js 中更改組件的父級

Question

我有一種情況，我有一個組件（比如一個計時器滴答作響）。 在發射特定的觸發說點擊一個按鈕或頁面滾動，我想改變的包裝組件<Timer/>與ID在div組件dummyWrapper用ID來DIV newParent 。 是否有任何 React 特定的方法來實現這一目標？

通過使用門戶，元素被安裝和卸載，從而丟失計時器的當前“狀態”。

使用document.getElementById( newParent ).appendChild(TimerWrapper)似乎有效，但我不確定這是否是一個好方法。

示例 DOM 結構：

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

const Child = () => {
return <div> <div id="dummyWrapper"> <Timer/>  </div>
}

Answer 1

您需要將狀態從子組件提升到父組件中。

使用 react，您需要擺脫使用 document.getElementById、jQuery 等的直接 dom 操作。您的應用程序的唯一真實來源需要僅存在於 react 中。

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>}