如何在Next.js中动态添加元素到已经呈现的DOM中？

xqkwcwgp 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(159)

我正在使用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 器中附加一个单独的元素，然后让它的子元素成为我实际上想添加的元素，但我觉得这是一个非常庞大的，实际上并不中肯的解决方案。

有没有什么方法可以动态地添加元素，使用这样的函数？

next.js

来源：https://stackoverflow.com/questions/76417251/how-to-dynamically-add-an-element-to-the-already-rendered-dom-in-next-js

1条答案

按热度按时间

os8fio9y1#

在React中，我们可以使用状态来显示或隐藏组件。下面是一个例子：

import { useState } from "react";

 function MyComponent() {
  const [showForgot, setShowForgot] = useState(false);

 return (
    <div>
      {showForgot && <ForgotPasswordComponent />}
      <button onClick={() => setShowForgot(true)}>Forgot 
 Password</button>
    </div>
    );
  }

此代码使用showForgot状态来控制是否显示ForgotPasswordComponent。单击按钮将showForgot设置为true，使组件可见。

赞(0）回复(0）举报 2023-06-22

我来回答

如何在Next.js中动态添加元素到已经呈现的DOM中？

1条答案

相关问题

热门标签

最新问答