我有一个菜单，其中每个菜单项都是一个按钮，我希望在不重新加载整个页面的情况下将特定的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内容？
Answered by OpenAI 100:
要将Reaction组件加载到特定的div中而不重新加载整个页面，可以使用React的Render()方法.此方法允许您将Reaction组件呈现给特定的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()函数，该函数使用React的Render()方法在带有ID datapanel的div中呈现MyComponent组件.这将用MyComponent组件的内容替换div的现有内容，在本例中是字符串"abc"和TranslationsList组件.
Added by me,个
最新的react-dom Render方法与ChatGPT提供的上述代码示例略有不同.
如果您使用的是最新的Reaction v18，您可以稍微更改loadTarget
const loadTarget = () => {
const root = ReactDOM.createRoot(
document.getElementById('datapanel');
);
root.render(<MyComponent />);
};