用react组件加载特定的DIV，而不重新加载整个页面

Question

我有一个菜单，每个菜单项都是一个按钮，我想加载一个特定的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内容?

Answer 1

如果你以前编写过纯JS程序，这很难，但你必须忘记"优秀的旧JS模式"。在反应。我也很难习惯不使用标准的JS元素(target, innerHTML等)来解决这样的问题。

所以React的解决方案是使用框架，你的页面重载问题将立即解决。用于组件的状态和用于单击的处理程序。我的主代码是这样的。你可以在Codesandbox找到一个工作的应用程序。

export default function App() {
const [showComponent, setShowComponent] = useState(false);
const handleButtonClick = (e) => {
setShowComponent(!showComponent);
};
return (
<div className="App">
<h1>
Load specific DIV with a react component without reloading the whole
page
</h1>
<a href="https://stackoverflow.com/questions/74654088/load-specific-div-with-a-react-component-without-reloading-the-whole-page">
Link to Stackoverflow
</a>
<div style={{ marginTop: "20px" }}>
<button onClick={handleButtonClick}>Magic</button>
</div>
{showComponent ? (
<div style={{ marginTop: "20px" }}>
This is the place of your component!
</div>
) : (
""
)}
</div>
);
}

Answer 2

1. 首先，如果没有必要，我不会在react应用程序上使用香草JS语法。即:document.getElementById("datapanel").innerHTML="abc<TranslationsList />"
2. 如果你使用的是React，你应该在DIV的组件中管理State，在按钮被点击后命令元素出现。

一个简单的例子是:CodeSandbox

import { useState } from "react";
export default function App() {
const [divState, setDivState] = useState(null);
const divElement = () => <div>I am the element that should appear</div>;
const handleDiv = () => {
setDivState(divElement);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={handleDiv}>Show DIV</button>
<div>{divState}</div>
</div>
);
}

Answer 3

我同意上面的答案。既然你已经在使用React，你应该利用它的特性/功能。没有必要重新发明轮子。

但是，如果您仍然对如何使当前的实现工作感兴趣。你可以使用renderToString()，它可以从ReactDOMServer中导入。请参考下面的代码片段作为示例。

import { renderToString } from 'react-dom/server'
const TranslationsList = () => {
return <div>TranslationsList Content</div>
}
export default function App() {
const loadTarget = () => {
document.getElementById("datapanel").innerHTML=`abc${renderToString(<TranslationsList />)}`;
}
return (
<div>
<button onClick={loadTarget}>Insert Component</button>
<div id="datapanel">Data Panel Holder</div>
</div>
);
}