在 React.js 中更改组件的父级答案

【问题标题】：Changing the parent of a component in React.js在 React.js 中更改组件的父级
【发布时间】：2019-12-19 21:40:02
【问题描述】：

我有一种情况，我有一个组件（比如计时器正在计时）。在触发特定触发器时，例如单击按钮或页面滚动，我想将 <Timer/> 组件的 Wrapper 组件从 id 为 dummyWrapper 的 div 更改为 id 为 newParent 的 div。是否有任何特定于 React 的方法来实现这一点？

通过使用传送门，元素被安装和卸载，从而失去计时器的当前“状态”。

使用document.getElementById(newParent).appendChild(TimerWrapper) 似乎可行，但我不确定这是否是一个好方法。

示例 DOM 结构：

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

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

【问题讨论】：

您可以在state 中定义一些变量，然后在单击按钮后 - 更改state 的值。并且显示/隐藏块取决于状态（或在父 div 上添加/删除某些类并取决于该类显示不同的块）

标签： javascript html css reactjs dom

【解决方案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>}

【讨论】：