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

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 和构建过程(包括如果您在浏览器中构建它)更新您的答案。