在我的 html 文件中需要 React 组件

Posted 2023-03-07

【中文标题】在我的 html 文件中需要 React 组件

【英文标题】：Requiring React components in my html files

【发布时间】：2017-01-03 03:35:01

【问题描述】：

我已经使用 express 设置了一个 node.js 服务器，并且我正在渲染一个带有 jsx 代码的 html 页面。一切正常，除了我不知道如何在我的 html 文件中导入其他 jsx 组件以在我的主脚本中使用它们。

我尝试过类似的东西

<script type="text/babel" src="./Modulo.jsx" />

但我收到一个错误GET http://localhost:5000/Modulo.jsx

这是我的 Modulo.jsx 的内容

var Modulo = React.createClass(
  render: function() 
    return(
      <h1>Hello</h1>
    )
  
); 

这是我的主要模块index.js

var express = require('express');
var React = require('react');
var app = express();

var server = require('http').Server(app);
var swig = require('swig');
var path = require('path');

app.engine('html', swig.renderFile);
app.set('view engine', 'html');

server.listen(5000);
app.get('/', function (req, res) 
   res.render('ModuleScreen');
);

ModuleScreen 是一个简单的 html 文件，我尝试在其中导入我的 Modulo.jsx

【问题讨论】：

错误码是什么？

你确定路径是对的吗？

我没有关于该错误的更多信息（已更新为屏幕）。是的，我确信这条路是正确的。

是 404 还是 500 错误？它是从公共文件夹提供服务还是在发送时在服务器上转译？

提供你的静态中间件初始化代码和你的Modulo.jsx在服务器上的路径

【参考方案1】：

听起来您还没有设置 express 来提供静态文件，您的设置中应该有如下内容：

app.use(express.static(path.join(__dirname, 'public')));

这会将public 目录中的所有内容作为静态资源提供，这正是您的script 标签所需要的。

---

但是，您通常不会将其他 jsx 模块直接导入 HTML，而应使用以下方式将其导入主包：

var Modulo = require('./Modulo.jsx');

但您还需要将以下行放在 Modulo.jsx 文件的底部：

module.exports = Modulo

还有其他方法可以导入/需要模块，但这可能是要走的路。如果您需要更多帮助，请使用您的主模块和更多 HTML 和构建过程（包括如果您在浏览器中构建它）更新您的答案。

【参考方案2】：

首先：jsx 不是浏览器可以理解的。您需要使用带有 react 预设的 babel 或 webpack 等工具将其转换为 javascript。

第二：即使你在你的 html 中包含了相同的转译为 js 的代码，它也不会做任何事情。您需要使用 reactDOM 将其安装到 DOM 元素。比如：

ReactDOM.render('<Modulo/>', document.querySelector('#root'))

【讨论】：

谢谢！这显然是一个好方法。但是现在我设置了 Webpack 和 Babel，我不能再用 express 运行我的服务器了。我将入口点配置为我的 index.js 文件，但在端口 5000 上看不到任何内容