如何在不重新加载整个页面的情况下加载包含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内容？

- Victorqedu

Answer 1

1. 首先，如果没有必要，在React应用程序中不应使用纯JS语法。例如：document.getElementById("datapanel").innerHTML="abc<TranslationsList />"。
2. 如果您正在使用React，则应在DIV组件中管理状态，以便在单击按钮时使元素出现。

一个简单的示例可以是这样：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>
  );
}

- Mariano

Answer 2

如果你之前编写过纯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://dev59.com/WcXsa4cB1Zd3GeqPko4y">
        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>
  );
}

- kepes

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>
  );
}

- Jonel Dominic Tapang