我正在使用Next.JS13,目前正在尝试找到一种方法,将组件代码手动添加到DOM中的另一个已经*渲染的**元素中。下面是组件的代码:
const layouts = {
forgotPassword: () => {
return (
<>
<ManualScrollerObject className="flex v center gap2">
<h3>
Forgor your password?
</h3>
<Field name="Tag/Email" id="user" />
<Field name="Password" id="pass" icon="bx bxs-lock" type="password"/>
<div className="flex v center gap1" style={{width: '100%'}}>
<LoginButton>
Sign in
</LoginButton>
<p>
No, no, no <a href="/signup">take me back!</a>
</p>
<p>
<a href="/forgot">Forgor your password?</a>
</p>
</div>
</ManualScrollerObject>
</>
)
}
}
现在,我想将这个元素添加到另一个元素中,我使用document.getElementById()
得到,而不是替换其他**子元素。
我为它创建了一个单独的函数,下面是我尝试的:
function forgotPassword() {
const loginScroller = document.getElementById('loginScroller');
ReactDOM.render(
layouts.forgotPassword(),
loginScroller
)
}
React.render()将简单地替换元素中的所有子元素,这不是我想要的。还有另一个解决方案,我可以在 Package 器中附加一个单独的元素,然后让它的子元素成为我实际上想添加的元素,但我觉得这是一个非常庞大的,实际上并不中肯的解决方案。
有没有什么方法可以动态地添加元素,使用这样的函数?
1条答案
按热度按时间os8fio9y1#
在React中,我们可以使用状态来显示或隐藏组件。下面是一个例子:
此代码使用showForgot状态来控制是否显示ForgotPasswordComponent。单击按钮将showForgot设置为true,使组件可见。