Question

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

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

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

在每个页面上加载React / React-dom包
根据需要加载页面特定的捆绑包（如果需要）

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

Answer 1

基本上你将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。

P.S。

如果你总是将侧边栏和页脚加载在一起（即永远不会只将一个或另一个bur加载到一起）你可以将它们React DOM渲染组合成一个脚本，所以你只需要在你的html中包含一个脚本< / p>

如何将React用于各个站点组件

1 个答案: