Question

My express的app.js加载到我的主模板文件中，如下所示：

app.get('/', routes.index);

routes.index的位置：

exports.index = function(req, res){
  res.render('Index', { title: 'Express' });
};

我的Index.jsx是我的主要模板，如下所示：

import React from 'react';
import Layout from './layout';
import NetworkCanvas from '../lib/components/NetworkCanvas/Canvas.jsx';

class Index extends React.Component {
  render() {
    return (
          <html>
            <head>
              <title>{this.props.title}</title>
            </head>
            <body>
              <NetworkCanvas />
            </body>
          </html>
    );
  }
}

然而，当我的localhost：8000加载时，我不断收到错误：

/MyWebpage/lib/components/NetworkCanvas/Canvas.jsx:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^
SyntaxError: Unexpected token import

我的Index.jsx中的import语句如何工作但子组件中的语句不可行？

请注意，我正在使用express-react-views作为我的快速引擎。

编辑：这是我的Canvas.jsx：

import React from 'react';

class Canvas extends React.Component {
    constructor() {
        this.state = {
            width: '0',
            height: '0'
        }
    }

    render() {
        return (
            <canvas 
                width={this.state.width} 
                height={this.state.height}
                ref={(el) => {this.canvas = el}}>
            </canvas>
        );
    }
}

export default Canvas;

编辑2：：这是我的项目。谢谢大家的帮助！

https://github.com/MarksCode/PersonalWebsite

Answer 1

我克隆了回购邮件，似乎目前所有jsx个文件或者说components都位于lib目录下。我将它们移到views目录下并将导入行更改为：

import NetworkCanvas from './lib/components/NetworkCanvas/Canvas.jsx';

并且错误得到解决，因为Docs表示只会编译views目录中的文件。

只会编译views目录中的文件（即app.set('views', __dirname + '/views'))。

因此您遇到了import错误。

其他信息：

解决import错误后，您会在Canvas.jsx中收到其他错误因此，您需要在构造函数的顶部添加以下内容。

super(props);

导入的组件获取：意外的令牌导入

1 个答案: