Question

我已经设置了一个带有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

Answer 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和构建过程（包括在浏览器中构建它）更新答案。

Answer 2

首先：jsx是浏览器无法理解的。您需要使用诸如带有反应预设的babel或webpack等工具将其转换为javascript。

第二：即使你在html中包含了转换为js的相同代码，它也不会做任何事情。您需要使用reactDOM将其挂载到DOM元素。类似的东西：

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

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

2 个答案: