我可以将 React 应用程序用作静态 HTML 页面上的组件吗

Posted 2023-02-22

【中文标题】我可以将 React 应用程序用作静态 HTML 页面上的组件吗

【英文标题】：Can I use a React app as a component on a static HTML page

【发布时间】：2020-03-25 04:56:49

【问题描述】：

我是 React 和 JS 的新手，正在使用 react-csv-viewer。

它按预期工作，我可以在本地服务器上构建和部署它。但我不需要这个，我只是想将应用程序集成为静态 html 页面的组件。

我已经尝试按照React tutorial 中列出的流程进行操作，但我无法理解构建流程以及如何实现这一点。

我只希望能够使用作者提供的<CsvViewer />，可能是这样

const rootElement = document.getElementById("root");
ReactDOM.render(<CsvViewer />, rootElement);

并在我的 HTML 文件中呈现查看器应用程序，而无需在（本地）服务器上构建和部署查看器应用程序。

将不胜感激这方面的任何帮助或提示。

【问题讨论】：

它只是一个组件。您可以像任何其他 React 组件一样导入并嵌入它。按照教程，只需将其放在 JSX 中 render 的 return 中即可。

【参考方案1】：

您可以按照您链接的教程中的说明添加 React。缺点是，您不能使用 JSX 语法（因为它应该在构建时转换为 JS，因为浏览器无法识别它）。

这里有一篇文章解释了如何在没有转译步骤的情况下做到这一点。

https://codepen.io/alexkrolick/post/react-without-a-build-step

别名React.createElement，并调用它来创建组件。 例如）

const h = createElement // convenient alias

// Instead of
<div className="foo" />

// create an element like so
h("div",  className: "foo" )

有关其工作原理的更多信息，请查看官方文档。https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects

但我真的怀疑在现实生活中是否有人以这种方式编写 React 代码而没有转译步骤。

用 React 创建一个单独的站点/页面会是一个偶然的问题吗？如果您不熟悉转译，可以查看 ParcelJS 轻松创建 React 站点。

【讨论】：

我不希望创建一个单独的页面，因为这应该为已经存在并独立呈现的页面添加一个类似小部件的功能。

@bambi022 CsvViewer是一个CJS模块，需要require。您可以找到一种在浏览器上使用require 的方法，但CsvViewer 不一定可以直接在浏览器上使用。如果你需要 React 的起点，试试我创建的 Sandbox。