Question

我遇到的情况是我有一个组件（例如计时器滴答作响）。在触发特定触发器时，例如单击按钮或滚动页面，我想将<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>
}

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

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

1 个答案: