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

我已经build立了一个node.js服务器与快递,我正在呈现一个HTML页面内的jsx代码。 一切工作正常,除了我不知道如何导入其他jsx组件在我的HTML文件中使用它们在我的主要脚本。

我试过类似的东西

<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

这听起来像你没有设置expression式来提供静态文件,你应该在你的设置中有如下的东西:

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

这将作为静态资源在public目录中提供,这就是script标记所需要的。


但是,通常不会将其他jsx模块直接导入到HTML中,而应该使用类似的方式将其导入到主包中:

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

但是你也需要把下面一行放在你的Modulo.jsx文件的底部:

 module.exports = Modulo 

还有其他的方式来导入/需要模块,但这可能是要走的路。 如果您需要更多帮助,请更新您的主要模块以及更多HTML和构build过程(包括如果您在浏览器中构build它)的答案。

首先:jsx是浏览器无法理解的东西。 你需要使用像反应预设babel这样的工具或webpack将其转换为JavaScript。

第二:即使你在html中包含相同的代码,也不会做任何事情。 您需要将其装载到DOM元素与reactDOM。 就像是:

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