node.js - 使用 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 代码，这会很困难，但您必须忘记 React 中的“良好的旧 JS 模式”。我也很难习惯不使用标准 JS 元素(target、innerHTML 等)来解决这样的问题。

所以React中的解决方案是使用框架，你的页面刷新问题将立即得到解决。 useState 表示组件的状态和单击的处理程序。我的主要代码如下所示。您可以在 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>
  );
}