2

鉴于以下场景，我如何在我的项目中使用 React/Preact 组件：

  • 主要/标题内容是使用 Django（或静态 html）模板生成的
  • 我想使用 React 生成侧边栏和页脚组件，具体取决于它所在的页面。

我认为以下方法可行，但我不知道如何根据以下几行拆分或加载捆绑包：

  • 在每个页面上加载 React/React-dom 包
  • 在需要的地方按需加载特定于页面的捆绑包

如何使用 webpack 捆绑单个组件以在静态 html 页面中使用并在需要的地方显示它们？如何为此配置 webpack？

4

1 回答 1

3

本质上，您将 React 从一堆 JS/JSX 文件转换为一个 JS 脚本（使用 Babel），然后将其加载到您的 html 文档中。所以它会是这样的：

<html>
  <head>
    // Usual head section stuff
  </head>

  <body>
    <div id="header">
      This is the Django site header
    </div>

    <div id="sidebar_root" />

    <div>
      Blah blah all the site's body content from Django
    </div>

    <div id="footer_root" />

    <script src="react_sidebar.js" />
    <script src="react_footer.js" />
  </body>
</html>

你会有你的 React 组件（它会有一堆子组件），其中一个被渲染成“react_sidebar.js”，另一个被渲染成“react_footer.js”。所以这些组件将在 React 中，而其他组件将是 Django。

因此，为了按需加载 React 捆绑脚本，您只需要包含脚本和作为其根目录的 div。

附言

如果你总是一起加载侧边栏和页脚（即永远不会只有一个或另一个 bur 总是同时加载）你可以将它们组合成一个脚本，所以你只需要在你的 html 中包含一个脚本

于 2017-01-26T23:48:44.537 回答