[英]Changing the parent of a component in React.js
我有一种情况,我有一个组件(比如一个计时器滴答作响)。 在发射特定的触发说点击一个按钮或页面滚动,我想改变的包装组件<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>
}
您需要将状态从子组件提升到父组件中。
使用 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>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.