Node.js 导入的组件正在获取：意外的令牌导入_Node.js_Reactjs_Express_Ecmascript 6

Node.js 导入的组件正在获取：意外的令牌导入

node.js reactjs express ecmascript-6

Node.js 导入的组件正在获取：意外的令牌导入,node.js,reactjs,express,ecmascript-6,Node.js,Reactjs,Express,Ecmascript 6,My express的app.js加载到我的主模板文件中，如下所示： app.get('/', routes.index); import React from 'react'; import Layout from './layout'; import NetworkCanvas from '../lib/components/NetworkCanvas/Canvas.jsx'; class Index extends React.Component { render() {

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

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

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>
    );
  }
}

其中

routes.index

为：

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

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

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

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>
    );
  }
}

我的Index.jsx中的

import

语句怎么可能工作，而子组件中的语句却不工作

请注意，我使用的是我的express引擎

编辑：这是我的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;

从“React”导入React；
类Canvas扩展了React.Component{
构造函数（）{
此.state={
宽度：“0”，
高度：“0”
}
}
render（）{
返回(
{this.canvas=el}}>
);
}
}
导出默认画布；

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

我克隆了repo，现在看来您所有的

jsx

文件或组件都在

lib

目录下。我将它们移动到

视图

目录下，并将导入行更改为：

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

错误得到解决，因为声明只传输

视图

目录中的文件

仅编译

视图

目录中的文件（即

app.set（'views'、u dirname+'/views'））

因此，您面临的

import

错误

其他信息：

一旦

导入

错误得到解决，您将在

Canvas.jsx

因此，您需要在构造函数的顶部添加以下内容

super(props);