时间戳

首页 > 解决方案 > 管理 reactjs 应用程序的系统

reactjs - 管理 reactjs 应用程序的系统

问题描述

我知道如何通过使用 render 方法并指定应该在哪里呈现它的 html 标记来指定在哪里呈现 reactjs 应用程序。

我不明白的是如何将 react.js 应用程序列表动态加载到同一个 HTML 标记中。

例如，有一个动态创建的侧边栏，为用户提供 N 个 react.js 应用程序的列表。当用户单击其中一个链接时，它会将该应用程序加载到右侧的 HTML 标记（div 或其他）容器中。

我相信这可能很容易，但已经为这个概念苦苦挣扎了一段时间。感谢任何人对此的任何投入。

标签： reactjs

解决方案

如果您确实有多个要换出的完整应用程序，则必须手动安装和卸载它们。像这样的功能，卸载以前的应用程序，然后安装一个新的应用程序。例子

function swapApp(App) {
  const appNode = document.getElementById('app')
  ReactDOM.unmountComponentAtNode(appNode)
  ReactDOM.render(<App />, document.getElementById('app'))
}

但这会很痛苦。因此，通常情况下，该菜单和正在更改的内容都是同一个 react 应用程序的一部分。此应用程序将呈现菜单，保持有关您单击的项目的状态，然后根据单击的内容有条件地呈现一些组件。

像这个例子

function App() {
  const [showingItem, setShowingItem] = React.useState(null)

  return (
    <>
      <p><a href="#" onClick={() => setShowingItem('A')}>Show Item A</a></p>
      <p><a href="#" onClick={() => setShowingItem('B')}>Show Item B</a></p>

      {showingItem === 'A' ? <AppA /> : null}
      {showingItem === 'B' ? <AppB /> : null}
    </>
  )
}

推荐阅读