使用react组件加载特定的DIV，而不重新加载整个页面
使用react组件加载特定的DIV，而不重新加载整个页面
提问于 2022-12-02 10:14:52
我有一个菜单，每个菜单项都是一个按钮，我希望在不重新加载整个页面的情况下，将一个特定的reactjs组件加载到特定的div中。
这是当前的代码，显然是坏的，但我不知道从哪里开始修复它.
...
<Button onClick={this.loadTarget}>
{menuItem.name}
</Button>
...
loadTarget(event) {
document.getElementById("datapanel").innerHTML="abc<TranslationsList />";
}当我单击菜单项时，我希望用值"abc<TranslationsList />"加载div。显示"abc“，但自定义组件" TranslationsList”不是，我想这是正常的，因为TranslationsList标记不是HTML。但是我怎么能加载我的组件？
我可以使用链接而不是按钮，但在这种情况下，问题是如何用特定的链接更新div内容？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-12-04 11:23:43
OpenAI https://openai.com/blog/chatgpt/回答
要在不重新加载整个页面的情况下将React组件加载到特定的div中，您可以使用React的render()方法。此方法允许您将React组件呈现给特定的DOM元素。
下面是一个示例，说明如何使用render()来完成您想要完成的任务：
import React from 'react';
import { render } from 'react-dom';
import TranslationsList from './TranslationsList';
// This is the component that will be rendered in the "datapanel" div
const MyComponent = () => (
<div>
abc<TranslationsList />
</div>
);
// This function will be called when the button is clicked
const loadTarget = () => {
render(<MyComponent />, document.getElementById('datapanel'));
};
...
<Button onClick={loadTarget}>
{menuItem.name}
</Button>在本例中，当单击按钮时，将调用loadTarget()函数，该函数使用function的render()方法使用ID datapanel呈现div中的MyComponent组件。这将将div的现有内容替换为MyComponent组件的内容，在本例中是字符串"abc“和TranslationsList组件。
是我加的，
最新的react-dom呈现方法与ChatGPT提供的上述代码示例略有不同，
如果使用的是最新的react v18，则可以稍微更改v18。
const loadTarget = () => {
const root = ReactDOM.createRoot(
document.getElementById('datapanel');
);
root.render(<MyComponent />);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74654088
复制相关文章
相似问题
腾讯云开发者
