react js导出时意外的令牌导出｛默认为Cards｝

Question

在我刚安装的应用程序上，我尝试导入我的组件，如下所示：

import {Cards , Chart , CountryPicker} from  '../components'

我制作了一个index.js目录：

export  {default as Cards} from './Cards/Cards'
export  {default as Chart} from './Chart/Chart'
export  {default as CountryPicker} from './CountryPicker/CountryPicker'

但它返回错误：未捕获的语法错误：意外的令牌"export"。

我这样做是为了复制一个教程，看起来它对导师有效，但对我无效！

Answer 1

这是Reactjs的基本格式。

更多你可以在这里基本的例子

//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';

Answer 2

我认为你应该首先单独定义组件，每个组件都应该在定义页面的底部导出，就像这样…

import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards

然后你现在可以在你的App.js组件中导入这个组件，基于这样的相对路径…

import Cards from "./components/Cards/Cards";

这是假设Cards距离您的主目录有2个文件夹。

Answer 3

问题是我没有将组件文件夹放在src文件夹中。因此，webpack对此没有采取任何措施，它被解释为导致错误的原始js文件。把它移到src文件夹就成功了！